在vue中使用iview-ui表单中提交图片

获取图片文件

使用了iviewui的upload组件来获取图片文件

          
            Upload files
          

同时由于不是真的需要上传到对应的地址, 所以设置before-upload对应的函数使其返回false终止上传

      handleBeforeUpload(file){
        this.form_submit.picture = file
        return false
      },

此时, 在form_submit就已经拿到文件了

上传

 submit(){
        // 设置请求头为 'Content-Type': 'multipart/form-data', 使请求可以上传图片
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        //  将json转换为FormData类型的数据
        let formData = new FormData();
        for(let key in this.form_submit){
          formData.append(key, this.form_submit[key])
        }
        // 发送请求
        postImage(formData,config).then(res => {
            console.log(res.data)
        })
      }

源码