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 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~