Vue+el-upload的图片上传、binary上传方式

https://segmentfault.com/a/1190000017496755  vue+elementUI的图片即时上传 

elementUi--->实现上传图片效果（upload+formData） - 我是一名好程序员 - 博客园

upload是element-ui里的上传组件，默认上传图片后会直接调用action属性写的接口，然后把图片传过去
但如果auto-upload属性写为false，那么图片上传后就不会自动调用接口，响应的，on-success方法也不会调用，这时我们需要用 on-change方法
on-change：文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 

file.size:以字节计的文件大小。 

data() {
    return {
      imageUrl: "",
      itemForm: {
        // :data="itemForm"上传时附带的额外参数
        token: sessionStorage.getItem("loginToken"),
        user_name: ""
      }
    };
  },

 action 必选参数，上传的地址
      data 上传时附带的额外参数
      name 上传的文件字段名 string
      drag 是否启用拖拽上传
      accept 接受上传的文件类型（thumbnail-mode 模式下此参数无效）
      accept="image/gif, image/jpeg, image/png,"

<p>点击上传</p>
    <el-upload
      class="upload-demo"
      action="/"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      multiple
      :limit="3"
      :on-exceed="handleExceed"
      :http-request="uploadFile"
      :file-list="fileList"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>

//点击上传
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

 可以看到,http-request对应的方法uploadFile是重点:

// 主要用到的是http-request的覆盖原有上传方式 !!!!!!!! :http-request="uploadFile"
    uploadFile(file) {
      let formDatas = new FormData();
      formDatas.append("file", file.file);
      formDatas.append("file", "file");//这"file" 代表参数名
      formDatas.append("user_id", 18); //把后端需要参数全部用这个形式push进去
      //formDatas.append("tokenId", this.$store.state.user.tokenId);
      this.$http
        .post(
          "http://nhvideo.pinyun.net.cn/app/index.php?i=1&c=entry&m=yun_shopv2&do=mobile&r=shipin.user.editavatar",
          formDatas //然后参数就把整个formDatas 扔过去就行
        )
        .then(res => {
          if (res.data.status == 1) {
            this.$message({
              message: res.data.msg,
              type: "success"
            });
          } else {
            this.$message({
              message: res.msg ? res.msg : "操作失败",
              type: "error"
            });
          }
        });
    }

使用binary上传方式

↑↑↑↑↑↑  请求中加headers: {'Content-Type': 'multipart/form-data'} 和

参数中处理 let formDatas = new FormData();formDatas.append("file", file.file);结合 

加上头部！
headers: {
    'Content-Type': 'multipart/form-data'
}

    uploadFile(file) {
      let formDatas = new FormData();
      formDatas.append("file", file.file);
      formDatas.append("file", "file");//这"file" 代表参数名
      formDatas.append("user_id", 18); //把后端需要参数全部用这个形式push进去
      this.$http
        .post(
          "http://nhvideo.pinyun.net.cn/app/index.php?i=1&c=entry&m=yun_shopv2&do=mobile&r=shipin.user.editavatar",
          formDatas, //然后参数就把整个formDatas 扔过去就行
          headers: {
            'Content-Type': 'multipart/form-data', // !!!!
          }
        )
        .then(res => {

        });
    }