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\]为表单数据存储的对象,使用时根据实际情况修改即可。

相关推荐
Zz_waiting.21 小时前
Javaweb 14.4 Vue3 视图渲染技术
前端·javascript·vue.js
前端开发爱好者21 小时前
一键 i18n 国际化神库!适配 Vue、React!
前端·javascript·vue.js
前端开发爱好者21 小时前
Vite 移动端调试利器!开发效率飙升 300%!
前端·javascript·vue.js
weixin_4569042721 小时前
Vscode中开发VUE项目的调试方案
ide·vue.js·vscode
BillKu21 小时前
容器元素的滚动条回到顶部
前端·javascript·vue.js
鱼钓猫1 天前
H5 电子签名组件
vue.js·canvas
就是帅我不改1 天前
敏感词过滤黑科技!SpringBoot+Vue3+TS强强联手,打造无懈可击的内容安全防线
前端·vue.js·后端
香香甜甜的辣椒炒肉1 天前
vue(7)-单页应用程序&路由
前端·javascript·vue.js
dreams_dream1 天前
vue中axios与fetch比较
前端·javascript·vue.js
梦鱼1 天前
Vue 项目图标一把梭:Iconify 自用小记(含 TS/JS 双版本组件)
前端·javascript·vue.js