vue+element 中表单提交el-form+上传组件el-upload_vben form 表单组件 图片上传

个人blog，欢迎关注加收藏

1. 页面效果
   
2. html代码：弹框：表单中包含图片上传的组件el-upload

//html
 <!-- 弹框 -->
    <div class="dialog">
      <el-dialog :title="formTitle" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="图标" label-width="7.5rem">
            <!-- :data="upLoadData" -->
            <el-upload class="avatar-uploader" 
            action="111"   //这里随便写，反正用不到，但是又必须要写，无奈
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          </el-form-item>
           <el-form-item label="分类名" label-width="7.5rem">
          </el-form-item>
          <el-form-item label="中文" label-width="7.5rem">
            <el-input v-model="form.chinese" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="英文" label-width="7.5rem">
            <el-input v-model="form.english" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="sureFormSubmit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

3. js代码

<script>
export default {
  name: 'secondaryClassification',
  data () {
    return {
      formTitle: '编辑',//表单标题
      dialogFormVisible:false,//对话框是否可见
      //对话框表单
      form: {
          imageUrl: '',
          chinese: '',
          english: '',
        },
      // upLoadData:{//上传时附带的其他参数
      //     srid:''
      // }
    }
  },
  methods: {
    //图片上传成功实现本地预览
    handleAvatarSuccess(res, file) {
        let _this = this;
        _this.form.imageUrl = URL.createObjectURL(file.raw);
      },
    //上传之前的钩子函数
    beforeAvatarUpload(file) {
      let fd = new FormData();
      fd.append('file',file);//传文件
      // fd.append('srid',this.upLoadData.srid);//传其他参数
      axios.post('/api/up/file',fd).then(function(res){
              console.log('成功');
      })
      return false//屏蔽了action的默认上传
    },
    //提交表单
    sureFormSubmit(){
     let _this = this;
     let api = '';
     _this.axios.post(api,{}).then(res=>{console.log(res)});
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

4. css代码

//css
/* 对话框 */
.secondaryClassification>>>.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .secondaryClassification>>>.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .secondaryClassification>>>.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .secondaryClassification>>>.avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

5. 上传图片的代码原理解析：

• el-upload的action随便填写action="111" //这里随便写，反正用不到，但是又必须要写，无奈，在钩子函数:before-upload="beforeAvatarUpload"阻止action的默认行为，再用钩子函数beforeAvatarUpload上传图片，将图片封装成formData对象，用ajax将图片对象传给后台接收图片的接口（后台需要提供一个单独上传图片的接口）：

 //上传之前的钩子函数
    beforeAvatarUpload(file) {
    	let api = /api/up/file;
      let fd = new FormData();
      fd.append('file',file);//传文件
      // fd.append('srid',this.upLoadData.srid);//传其他参数
      axios.post(api,fd).then(function(res){
              console.log('成功');
      })
      return false//屏蔽了action的默认上传
    }
1
2
3
4
5
6
7
8
9
10
11

• 上传成功后用钩子函数:on-success="handleAvatarSuccess"实现本地预览，并获取到表单提交时需要的图片路径：

//图片上传成功实现本地预览
   handleAvatarSuccess(res, file) {
       let _this = this;
       _this.form.imageUrl = URL.createObjectURL(file.raw);//表单获取到提交时要传的图片路径
     },

1
2
3
4
5
6

<el-upload class="avatar-uploader" 
     action="111"   //这里随便写，反正用不到，但是又必须要写，无奈
      :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
      //图片的本地预览
        <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
1
2
3
4
5
6
7

• 最后表单提交

 //提交表单
    sureFormSubmit(){
     let _this = this;
     let api = '';
     _this.axios.post(api,{}).then(res=>{console.log(res)});
  }
1
2
3
4
5
6