Element-UI解决跨域上传问题（:http-request）

书写本文的起因是在使用若依前后端分离框架过程中需要进行图片上传的操作，但是本机前端上传的图片是发送给服务器的后端接口，后端接口返回对应的json字符串，涉及到跨域上传问题，这里给出一个解决方案（因为其它设置例如：在配置文件config 里面增加代理的方式、 with-credentials=“true”等没有作用）

vue代码

script：
利用XMLHttpRequest实现的数据回传

uploadFile(param) {
      var that = this;//避免this指针在后面的请求以后改变
      var fileObj = param.file;
      // this.uploadAction是接收上传文件的后台地址
      var FileController = this.uploadAction;
      // FormData 对象
      var forms = new FormData();
      // 文件对象
      forms.append("file", fileObj);
      // XMLHttpRequest 对象
      var xhr = new XMLHttpRequest();
      xhr.open("post", FileController, true);
      xhr.onload = function () {
        var strData =  xhr.response;//回传的数据接受
        var jsonData = JSON.parse(strData);//这里由于后端接口返回的是String，而后面需要的是json
        that.form.mark1 = jsonData["data"];//取出json中对应需要的数据存入form表单中
      };
      xhr.send(forms);
    }

下面是template：

	<el-form-item label="图片"  prop="mark1">
       <el-upload
         :action="uploadAction"
         :show-file-list="false"
         :before-upload="beforeAvatarUpload"
         name="upfile"
         :http-request="uploadFile"
         :auto-upload="true">
         <img v-if="form.mark1" :src="form.mark1" class="imagesDetail">
         <i v-else class="el-icon-plus avatar-uploader-icon" ></i>
       </el-upload>
    </el-form-item>

:action是后端目标接口地址，但是由于使用了:http-request，所以这里填什么都无所谓了。另外我这里form.mark1用于存放图片地址。