前端使用iview中upload上传文件给后台

 在弹框里面添加 upload上传文件。

上传前的钩子函数。   return false; 可以阻止默认的上传流程，手动控制文件上传。

 上传时的确定按钮。

最后：后台给你返回的链接 例如：www.baidu.com。 需要使用点击按钮打开。

 

手动上传改为自动上传：

<Col span="6">
  <Upload name="multipartFiles" show-upload-list action 
  :before-upload="beforeUpload">
    <Button icon="ios-cloud-upload-outline">上传图片</Button>
  </Upload>
</Col>

上传函数：

    // 图片上传之前的钩子函数
    beforeUpload(file){
      this.files = file
      this.multipartFiles = file
      if(this.examine.indexOf(this.multipartFiles.name.split('.')[1]) == -1){
        this.files = []
        this.multipartFiles = []
        return this.$Message.error("文件上传格式不正确，请上传(jpg和png)的图片！")
      }
      this.uploadPictures()
    },
    // 上传图片接口
    uploadPictures(){
      let param = new FormData()
      param.append("multipartFiles",this.multipartFiles)
      new Promise((resolve,reject)=>{
        Api.uploadImageReturnsURL(param).then(response=>{
          this.pictureAddress = []
          for(let i in response.result){
            this.pictureAddress.push(this.combinationObject(response.result[i],i))
          }
          this.$Message.success("上传图片成功！")
        }).catch(error=>{
          this.$Message.error("上传图片失败！")
          reject(error)
        })
      })
    },