希望明天越来越|

张尊娟

园龄:5年3个月粉丝:31关注:1

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) 这个方法效果就如图,会有一个绿色对号的标志,不加就是下面的效果

本文作者:张尊娟

本文链接:https://www.cnblogs.com/wszzj/p/16551652.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   张尊娟  阅读(461)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起