element-plus组件Upload 上传图片(超详细)

先放代码,下面做字段详细解释

以下使用场景为:修改表单数据,表单中包含图片。

js 复制代码
<el-upload 
    :action="uploadImg" 
    multiple 
    :headers="headers"
    :on-success="(response, file, fileList) => successUpload(item.name,response,file,fileList)"
    :on-error="errorUpload" 
    :limit="4" 
    list-type="picture-card"
    :file-list="localFormData[item.name]"
    :on-remove="(file, fileList) => handleRemove(file, fileList, item.name)"
    :on-preview="handlePictureCardPreview">
            //自定义图标/提示文字
           <img src="/images/ticketForm/camera.png" />
           <div class="add-picture">
                     <el-icon><Plus /></el-icon>
                     <span>添加图片</span>
           </div>
   </el-upload>
   <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" class="img-box" />
   </el-dialog>
   //js
   import { uploadImg } from '@/api/system/system'//上传图片的接口
   import { useUser } from '@/store/user'
   const userStore = useUser()
   const token = userStore.getToken()
   const headers = ref({
    "x-access-token": token
    })
    const dialogVisible = ref(false)
    const dialogImageUrl = ref('')
const successUpload = (name, response, file, fileList) => {
    localFormData[name].push(file.response.result);//localFormData存储表单数据的对象
}
const errorUpload = (error) => {
    console.log(error);
}
// 移除图片
const handleRemove = (file, files, name) => {
    files.forEach(item => {
        if (item.response && item.response.length > 0) {
            item = item.response.result
        }
    })
    localFormData[name] = JSON.parse(JSON.stringify(files));
}
//放大展示
const handlePictureCardPreview = (file) => {
    dialogImageUrl.value = file.url
    dialogVisible.value = true
}

先讲一下这里提交包含图片的表单的逻辑:

1、先上传图片到服务器,服务器会返回一个地址.

2、把服务器返回的地址存放到存放表单的变量中,再提交表单数据即可。

upload组件相关属性解释:

action:上传图片的接口地址。

multiple:是否支持多选文件。

headers:请求接口的请求头。

on-success:文件上传成功的回调。

on-error:文件上传失败时的回调。

on-remove:文件移除时的回调。

on-preview:点击文件列表中已上传的文件时的回调。

limit:最大上传文件数。

list-type:文件列表的类型。

file-list:默认上传文件(等于v-model:file-list可以设置默认上传的图片,或者用来展示该字段原有的图片.如果只是新增表单可以不用写该字段,这里是用来修改表单数据时,展示原有数据使用)。

注:

file-list展示的数据格式为(结构不对会显示不出来):

{ name: '', url: ''},{ name: '', url: ''}\] (name根据情况传入,url必须有) 此部分代码localFormData\[name\]为表单数据存储的对象,使用时根据实际情况修改即可。

相关推荐
猩兵哥哥3 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
EMT4 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
我是日安5 小时前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js
鹏多多5 小时前
深入解析vue的keep-alive缓存机制
前端·javascript·vue.js
用户51681661458411 天前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦1 天前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He1 天前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ1 天前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊1 天前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码1 天前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js