使用ElementUI el-upload上传文件_el-table中使用el-upload

使用ElementUI el-upload上传文件

html页面

 <el-upload accept='.jpg,.jpeg,.png,.gif' class="upload-demo" drag action="/safemanage/ipinfo/upload"
            :beforeUpload="beforeAvatarUpload" :http-request="imgUpload" :on-success="handleproSuccess" multiple
            :limit="1" :file-list="imageList" :disabled='dis'>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <img v-if="imageUrl" :src="imageUrl" class="avatar" width='150px' height="150px">  //这是用来编辑回显图片
1
2
3
4
5
6
7

script

beforeAvatarUpload(file) { },
      handleproSuccess(res, file) { },
      imgUpload(param) {
        let formData = new FormData();
        formData.append("file", param.file);
        formData.append("fileClass", "MOOC_VIDEO");
        formData.append("isMd5", true);
        formData.append("fileName", param.file.name);
        api.upload(formData).then(data => {  //调用后台接口
          this.tableData = [];
          if (data) {
            this.pictureId = data.id;
            this.fileName = data.fileName;
          }
        });
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16