小程序前端Vue里使用u-upload进行多图片上传

1.标签代码如下：

<!--fileList存放图片集合-->
<!--action图片上传请求方法-->
<!--onRemove删除预览图片-->
<!--onSuccess图片上传成功后的回调函数-->
<u-upload file-list="fileList" :action="action" @on-remove="onRemove" @on-Success="onSuccess"></u-upload>

2.属性值的定义和JS相关方法代码如下：

import config from '@/utils/config.js'
data() {return {//图片显示前缀imgConfig: config.imageBaseUrl,form: {  pictureUrl: undefined,},//图片上传请求的后台方法 config.apiHost访问方法前缀action: config.apiHost + "/forum/forum/multiPicturesUpload",//存放图片集合fileList: []}
},
methods: {//图片成功上传后的回调 data为服务器返回的数据，包括图片的存放地址和名称onSuccess(data, index, lists){//页面上定义的临时存放图片的对象，提示也保存后台返回的图片名称let currentFile = {name: '', url: ''};currentFile.name = JSON.parse(data).name;currentFile.url = JSON.parse(data).imgUrl;//成功上传一个图片就往fileList里面添加一个图片对象this.fileList.push(currentFile);//this.form.pictureUrl为后台图片字段来保存字符串类型的图片集合this.form.pictureUrl = JSON.stringify(this.fileList)//console.log("打印图片List：onSuccess", this.fileList);},//删除一张图片的回调，lists这是成功删除一个图片后，还剩余的图片集合onRemove(data, lists){//lists.length > 0说明删除之前已经上传了多余两张的图片if(lists.length > 0 ){var currentfileList = [];//遍历this.fileList 与剩余的lists进行匹配，来组成一个新的格式合适的剩余图片集合this.fileList.forEach((item, index)=>{lists.forEach((item1, index1)=>{if(item.name == JSON.parse(item1.response).name){currentfileList.push(item);}});})//删除后对图片集合及时冬天更新，即对this.fileList重新赋值this.fileList = currentfileList;}else{//说明删除之前只有一张图片，删除成功后把this.fileList清空即可this.fileList = [];}this.form.pictureUrl = JSON.stringify(this.fileList)//console.log("打印图片List：onRemove", this.fileList);}
}

3.页面和数据库效果如下：

4.后台图片上传代码就不再展示了，提示一点：调取图片上传后台方法我返回的是图片名称和图片存储地址。

小程序前端Vue里使用u-upload进行多图片上传相关推荐

vue 富文本 quill 编辑器，实现图片上传到服务器，以及实时字数统计
vue 富文本 quill 编辑器,实现图片上传到服务器,以及实时字数统计写在前面 vue 富文本 quill / vue-quill-editor 如何使用图片上传到服务器实时字数统计图片编 ...
对于 React 结合 Antd 的 Upload 组件实现图片上传
一. React 结合 Antd 实现图片上传引入所需相关的组件和文件,代码如下所示: import React, { Component } from 'react' import PropTyp ...
vue用form上传图片_Vue formData实现图片上传
本文实例为大家分享了vue formdata实现图片上传的具体代码,供大家参考,具体内容如下 import vue from 'vue' /** * 图片上传 * 已注入所有vue实例, * temp ...
upload组件实现图片上传，图片上传，上传图片，上传头像，批量上传图片前后端逻辑
1.主要使用el-ui的upload组件.代码如下,最主要的就是将上传的文件转化为当前的url显示在页面主要代码如下,基于vue的: <template><div><e ...
upload.js 文件图片上传
//isImgControl:缩略图片大小是否控制 //isYin:是否加水印 var isImgtemp;function uploadImgControlAndYin(isControl){isI ...
uni-app——开发微信小程序因超过2MB限制无法打包预览、上传
分包技术一.小程序对大小的限制二.问题描述 1.描述 2.问题原因三.解决方法 1.减少项目的大小的方法 2.分包技术 2.1 分包依据 2.2 分包步骤四.相关知识点补充(pages.jso ...
微信小程序：录音功能（授权、统计时长、上传）
最近呢,用小程序做了个录音的功能,接下来呢,与大家一起分享一下我的开发心得,希望能帮到大家.那我们就继续向下
【vue.js】+云存储（实现图片上传功能）
利用vue.js+element-ui实现云存储上传图片功能文章目录前言一.对象存储二.配置腾讯云Cos 1.引入库第一步拥有腾讯云的开发者账号实名认证三.新建文件上传组件新建上传图片 ...
cl.r27.lol.index.php,编写 python 小程序，将LOL官网的皮肤保存下来，上传百度云，记录那些强撸灰飞烟灭的日子...
to 撸的血泪史:大学四年几乎都在宿舍打撸,So,把官网的皮肤都保存下来,存到百度云,就当一种纪念编辑器:pycharm 用到的包:urllib.request, requests, json, r ...

小程序前端Vue里使用u-upload进行多图片上传

小程序前端Vue里使用u-upload进行多图片上传相关推荐

最新文章

热门文章