element 实现上传功能

上传

方法1：

• 直接在action里把地址写死
• 如果需要传数据用 :data ={} 来传
• 如果需要头部添加token，可以使用:headers={} 来添加

此方法可以使用elementui中的success方法

<el-form-item label="上传背景图" prop="backgroundImage">
        <el-upload class="upload-demo" action="https://...../upload"
          :data="{ 'saveType': '2', 'domain': 'Card' }" 
          :headers="{ access_token: access_token }"
          list-type="picture-card" :file-list="imageUrlBack" :limit=1 
          :on-exceed="handExceed"
          :on-success="handleSuccessback" v-model="uploadForm.backgroundImage">
          <el-button size="small" type="text">点击上传</el-button>
        </el-upload>
      </el-form-item>

方法二：（方便后期维护，如修改域名等）我采取这个方法是因为refresh_token ,想要调用封装的http

• action ='' 保留可以任意赋值
• 使用 :http-request 使用自己的方法覆盖action
• 重要的一点是参数是param，数据格式是 new FormData()
• 使用http-request无法调用on-success方法，如果还想使用我们可以在param参数中获取param.onSuccess(res)

<el-form-item label="上传效果图" prop="finishedImage">
        <el-upload class="upload-demo" 
			action='finishedImage'
        	:http-request="imgUpload" list-type="picture-card"
         	:file-list="imageUrlFin" 
            :limit=1 
            :on-exceed="handExceed" 
			v-model="uploadForm.finishedImage">  
          <el-button size="small" type="text">点击上传</el-button>
        </el-upload>
</el-form-item>

 // 上传背景图片
    bacUpload(param) {
      const file = param.file
      let data = new FormData()
      data.append('file', file)
      data.append('saveType', 2)
      data.append('domain', 'Card')
      this.$api.upload(data).then(res => {
        if (res.data.code === 1) {
        param.onSuccess(res)
            this.uploadForm.backgroundImage = res.data.data
    
          }
        
      })
    },

• 使用param.onSuccess(res) 这个方法效果就如图，会有一个绿色对号的标志，不加就是下面的效果