图片上传vue --file

一、初识multipart/form-data

enctype属性:

enctype：规定了form表单在发送到服务器时候编码方式，它有如下的三个值。

application/x-www-form-urlencoded：默认的编码方式。但是在用文本的传输和MP3等大型文件的时候，使用这种编码就显得 效率低下。

multipart/form-data：指定传输数据为二进制类型，比如图片、mp3、文件。

text/plain：纯文体的传输。空格转换为 “+” 加号，但不对特殊字符编码。

Vue使用el-upload文件(图片)上传

1.一般的整体流程就是：咱们选择一个文件点击确定上传后，会上传到服务器（action），这时候服务器会返回给我们一个url（在on-success回调中可以拿到），接下来就是在提交表单的时候将该url传给后端就可以了。

2.他们会直接存图片，也就是存图片的二进制对象base64编码，然后返回的时候是url地址 。这时候我们就用不到上面的action了，需要用到on-change事件，拿到我们上传图片的blob对象，并传给后端 。

一 调用action

<el-form-item label="视频上传" prop="" :rules="[]">
  <el-upload
    class="upload-demo"
    :action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/iot/labor/labourSafeTrain`"
    :on-success="uploadSuccess"
    :before-upload="beforeAvatarUpload"
    :show-file-list="true"
    :limit='1'
    :file-list="videofileList"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <!-- <div slot="tip" class="el-upload__tip">
      只允许导入“xls”或“xlsx”格式文件！
    </div> -->
  </el-upload>
</el-form-item>

// 上传之前的回调
beforeAvatarUpload(file) {
  const isLt50M = file.size / 1024 / 1024 < 50;
  //const isJPG = fileType === 'image/jpg' || fileType === 'image/jpeg' || fileType === 'image/png'
  if (['video/mp4', 'video/ogg','video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1) {
    this.$message.error('上传视频只能是 mp4、ogg、flv、avi、wmv、rmvb 格式!');
    return false;
  }
  //if (!isJPG) {
  //  this.$message.error('上传图片的格式只能是 JPG或PNG 格式!')
  //  return false
  //}
  if (!isLt50M) {
    this.$message.error('上传视频大小不能超过 50MB!');
    return false;
  }
  return true;
},
// 上传成功的回调
uploadSuccess(obj,res,file) {
  if (obj.success) {
    this.$message.success({dangerouslyUseHTMLString: true,
      message: obj.msg})
    this.inputForm.url = obj.url // 后端返给我们的路径
  } else {
    this.$message.error('操作失败')
  }
},

二使用流上传

代码：

2.1 添加组件

<el-form-item label="实验室照片：" prop="photo">
                                <el-upload class="avatar-uploader" action="" :auto-upload="false" ref="upload" :show-file-list="false" accept="image/*" :on-change="imageChange">
                                    <img v-if="imgurl" :src="imgurl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                <div>支持jpg和png格式，小于2M，建议比例16:9</div>
 </el-form-item>

2.2 调用接口：

export function uploadFileToFast(params, config, cancelFun) {
  // 上传文件
  return request({
    url: '/file/uploadFileToFast',
    method: 'post',
    headers: {
      "Content-Type": "multipart/form-data",
      Authorization: getToken()
    },
    data: params,
    onUploadProgress: config,
    cancelToken:cancelFun
  })
}

2.3 前端 调用接口方法：

  imageChange: function (res, fileList) {
            debugger
            const file = fileList[fileList.length - 1].raw;
            const fileSize = file.size;
            let fileExtension = '';
            let fileName = '';
            if (file.name.lastIndexOf('.') > -1) {
                fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1);
                fileName = file.name.split('.')[0];
            }
            if (!fileSize) {
                this.$message.error('无效的文件，请重新选择！');
                return;
            }
            if (fileSize / 1024 / 1024 > 2) {
                this.$message.error('上传文件大小不能超过 2MB!');
                return;
            }
            if (fileExtension != 'jpg' && fileExtension != 'png' && fileExtension != 'jpeg') {
                this.$message.error('支持jpg和png格式!');
                return;
            }

            let params = new FormData();
            params.append('fileName', file);
            let that = this
            const reader = new FileReader() // 创建读取文件对象
            reader.readAsDataURL(file) // 发起异步请求，读取文件
            reader.onload = function () { // 文件读取完成后
                that.imgurl = reader.result
            }
            uploadFileToFast(params).then((res) => {
                console.log(res);
                this.form.photo = res;
                // this.msgSuccess("上传成功");
            }).catch((e) => {
            });
            this.$refs.upload.clearFiles();
        },

参考：

vue el-upload上传文件方法 详细解答 action 和 http-request两种方式_wwf1225的博客-CSDN博客