vue上传图多张图片功能

PictureCard组件

<template><div class="upload-picture-card" :key="fileKey"><el-uploadmultipleref="pictureCard"accept=".png, .jpg, .jpeg":action="uploadImgUrl":headers="headers":file-list="fileList":on-preview="handlePreview":on-remove="handleRemove":before-upload="handleBeforeUpload":on-error="handleUploadError":on-success="handleUploadSuccess"list-type="picture-card"><i class="el-icon-plus"></i><!-- 上传提示 --><div class="el-upload__tip" slot="tip" v-if="showTip">请上传<template v-if="fileSize">大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template><template v-if="fileType">格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b></template>的文件</div></el-upload><el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body><img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto;"></el-dialog></div>
</template>
<script>
/*** 图片多传*/
import { getToken } from "@/utils/auth";
export default {props: {//值value: {type: Array,default(){return []},},// 大小限制(MB)fileSize: {type: Number,default: 5,},// 是否显示提示isShowTip: {type: Boolean,default: true,},},data() {return {dialogVisible: false,dialogImageUrl:'',uploadImgUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址headers: {Authorization: "Bearer " + getToken(),},fileType: ["png", "jpg", "jpeg"],fileList: [],fileKey: Math.random()};},computed: {// 是否显示提示showTip() {return this.isShowTip && (this.fileType || this.fileSize);},// 列表list: {get: function() {let temp = 1;if (this.value) {// 首先将值转为数组const list = Array.isArray(this.value) ? this.value : [this.value];// 然后将数组转为对象数组return list.map((item) => {if (typeof item === "string") {item = { name: item, url: item };}item.uid = item.uid || new Date().getTime() + temp++;return item;});} else {this.fileList = [];return [];}},set: function() {}},valueList(){return this.value;}},watch:{value:{handler(newVal){if(!newVal || newVal.length <= 0)this.fileKey = Math.random();  //利用随机数清除组件缓存},deep: true,immediate: true},list:{handler(newVal){this.fileList = newVal;},deep: true,immediate: true}},methods: {// 上传前校检格式和大小handleBeforeUpload(file) {// 校检文件类型if (this.fileType) {let fileExtension = "";if (file.name.lastIndexOf(".") > -1) {fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);}const isTypeOk = this.fileType.some((type) => {if (file.type.indexOf(type) > -1) return true;if (fileExtension && fileExtension.indexOf(type) > -1) return true;return false;});if (!isTypeOk) {this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);return false;}}// 校检文件大小if (this.fileSize) {const isLt = file.size / 1024 / 1024 < this.fileSize;if (!isLt) {this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);return false;}}return true;},// 预览handlePreview(file){this.dialogImageUrl = file.url;this.dialogVisible = true;},// 删除handleRemove(file, fileList){const url = file.response ? file.response.data.url : file.url;const index = this.valueList.findIndex(v => v == url);if(index != -1)this.valueList.splice(index,1);this.$emit("input", this.valueList);},// 上传失败handleUploadError(err) {this.$message.error("上传失败, 请重试");},// 上传成功回调handleUploadSuccess(res, file) {this.$message.success("上传成功");//this.$emit("input", res.data.url);this.valueList.push(res.data.url);this.$emit("input",this.valueList);},},
};
</script>
<style>
.el-upload__tip {line-height: 1.2;
}
</style>

使用

import PictureCard from './PictureCard';
components: {PictureCard,},
<!--该数组中存储为图片url-->
<PictureCard v-model="item.fileList"/>

vue上传图多张图片功能相关推荐

vue 移动端头像裁剪_移动端上传头像并裁剪功能(h5)
移动端头像图片上传裁剪 .button { outline: 0; display: inline-block; margin-bottom: 0; font-weight: 400; text-al ...
php多图片上传并回显,如何用input标签和jquery实现多图片的上传和回显功能
本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图效果图我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input- ...
从web编辑器 UEditor 中单独提取图片上传，包含多图片单图片上传以及在线涂鸦功能...
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...
vue前端实现上传文件,vue 上传文件
以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传 ...
html ajax 图片上传,Ajax实现图片上传并预览功能
先给大家展示下效果图,大家感觉不错,请参考实现代码. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图 ...
vue 上传文件和下载文件
vue 上传文件和下载文件 1. 上传文件 2. 下载文件 1. 上传文件上传文件我所使用的组件是element ui 的 el-upload,我一共进行了如下两步,第一步:修改样式,因为el-up ...
vue上传（兼容IE9）
项目中vue文件上传功能原来使用的是element ui组件,头像上传裁剪使用的是vue-image-crop-upload,但是这两个组件只支持到IE10+,现在项目要求兼容IE9,这两个组件就没办 ...
vue上传文件formData入参为空，接口请求500
long long long time no see,最近遇到个奇葩的问题来记录下,不知道有没有小伙伴和我一样崩溃过.写了三年代码,上传这么简单的功能.第一次遇到前端入参fromData请求接口报50 ...
Vue上传文件操作（没有CV,认真看）
项目场景: 通过vue上传文件基本操作问题描述: 使用html上传文件时,很容易理解,那么vue文件上传呢?我们学了vue不可能还往里面写原生html的内容吧! 先放代码再解释: <templ ...

vue上传图多张图片功能

vue上传图多张图片功能相关推荐

最新文章

热门文章