vue+elementUI上傳圖片至七牛云組件封裝及循環使用

1.效果（解決循環組件賦值問題）在這里插入圖片描述
廢話不多說直接上代碼
2.下載七牛云依賴

npm install qiniu-js
# 或者使用 yarn
yarn add qiniu-js

3.在vue組件中引入

import * as qiniu from 'qiniu-js'

4.在components文件夾下創建UploadImg1/uploadImg.vue組件

<template><div:style="{display: 'grid','justify-content': 'space-between','grid-template-columns': `repeat(auto-fill,minmax(${w},1fr))`}"class="imgBoxSty"><divclass="img-list-item common mb_10":style="{ width: w }"v-for="(item, index) in fileList":key="index"><!-- <videov-if="!matchType(item.name)":style="{ width: w, height: h, margin: '0 9px' }"controls="controls":src="item.url">您的瀏覽器不支持視頻播放</video> --><el-image@mouseover="srcList = [item]":preview-src-list="srcList":style="{ width: w, height: h, margin: '0 9px' }":src="item"fit="cover"></el-image><i class="del-img" @click="forkImage(index)" v-if="isShowImg == true"></i></div><div v-if="maxlength < limit" @click="change"><el-upload:multiple="imgmultiple"action="":data="dataObj":show-file-list="false":auto-upload="true":on-remove="handleRemove":on-success="handleUploadSuccess":before-upload="beforeUpload":on-progress="uploadVideoProcess":http-request="FileForQiNiu"><spanclass="warpss":style="{ width: w, height: h, lineHeight: h }"v-if="isShowImg == true"><iclass="el-icon-plus":style="{color: '#8C939D',fontSize: '18px',fontWeight: 'bold',padding: paddings}"></i></span></el-upload></div></div>
</template>
<script>
import { GetqiniuToken } from "@/api/tools/qiniu";//這個是獲取七牛云token接口，由后端提供
import * as qiniu from "qiniu-js";//引入七牛云依賴
// 或者按需導入（推薦）
export default {name: "uploadImg",props: {//是否多選imgmultiple: {type: Boolean,default: false},//是否需要上傳圖片(false:需要,true:不需要,只能查看圖片不能做任何操作)isShowImg: {type: Boolean,default: false},//個數顯示limit: {type: Number,default: 5},maxlength: {type: Number},value: Array,//最大上傳圖片數量maxCount: {type: Number,default: 5},//寬度w: {type: String// default:'100px'},//高度h: {type: String// default:'100px'},paddings: {type: String},// 上傳類型，1圖片，2視頻，3圖片或視頻uploadType: {type: Number,default: 1}},data: function() {return {flag: true,srcList: [],videoFlag: false,isShow: true,videoUploadPercent: 0,count: 5,videis: false,dataObj: {policy: "",signature: "",key: "",ossaccessKeyId: "",dir: "",host: ""},dialogVisible: false,dialogImageUrl: []};},computed: {fileList() {return this.value;}},mounted() {if (this.fileList.length < this.limit) {this.isShow = true;} else {this.isShow = false;}},methods: {//圖片視頻匹配matchType(name) {// console.log("圖片視頻匹配");//后綴獲取let suffic = "";//獲取類型結果let result = "";try {let fileArr = name.split(".");suffic = fileArr[fileArr.length - 1];// console.log('suffic',suffic);} catch (error) {suffic = "";}//圖片格式var imgList = ["png", "jpg", "jpeg", "bmp", "gif"];//進行圖片匹配result = imgList.some(item => {return item === suffic;});// console.log('結果',result);if (result) {result = "image";// console.log('結果',result);return result;}},//刪除視頻/圖片forkImage(index) {console.log("刪除視頻/圖片", this.fileList, "索引", index);// var data = this.fileList.splice(index, 1);// this.$emit("delFile", this.fileList);// if (this.fileList.length < this.limit) {//   this.isShow = true;// } else {//   this.isShow = false;// }// 創建新數組而不是修改原數組// 創建新數組（不要直接修改props）const newFileList = [...this.value];newFileList.splice(index, 1);// 只使用input事件更新數據this.$emit("input", newFileList);// 更新顯示狀態this.isShow = newFileList.length < this.limit;},change() {// console.log("change函數", this.fileList);if (this.fileList.length < this.limit) {this.isShow = true;} else {this.isShow = false;}},getUUID() {return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, c => {return (c === "x"? (Math.random() * 16) | 0: "r&0x3" | "0x8").toString(16);});},emitInput(fileList) {// console.log("emitInput韓束", fileList);if (!this.flag) {return false;}let value = [];for (let i = 0; i < fileList.length; i++) {value.push(fileList[i]);}this.$emit("input", value);},handleRemove(file, fileList) {if (this.flag) {// console.log("handleRemove函數", file, fileList);this.emitInput(fileList);}},//上傳圖片/視頻成功后的操作handleUploadSuccess(res, file) {console.log("handleUploadSuccess函數上傳圖片/視頻成功");const url =this.dataObj.host +"/" +this.dataObj.key.replace("${filename}", file.name);const newFileList = [...this.value, url];this.$emit("input", newFileList);if (newFileList.length >= this.limit) {this.$message({message: `最多只能上傳${this.limit}個文件`,type: "warning",duration: 1000});}},//進度條uploadVideoProcess(event, file, fileList) {this.videoUploadPercent = Math.floor(event.percent);},beforeUpload(file) {this.flag = true;// 上傳限制視頻//let vedioArr = [// "video/mp4",//  "video/m4v",//  "video/ogg",//  "video/flv",//"video/avi",// "video/wmv",//  "video/rmvb"//  ];// 上傳限制圖片let imgArr = ["image/jpeg", "image/PNG", "image/gif", "image/png"];// 既可上傳圖片、視頻let bothArr = ["video/mp4","video/m4v","video/ogg","video/flv","video/avi","video/wmv","video/rmvb","image/jpeg","image/PNG","image/gif","image/png"];//視頻/圖片校驗if ([// "video/mp4",// "video/m4v",// "video/ogg",// "video/flv",// "video/avi",// "video/wmv",// "video/rmvb","image/jpeg","image/PNG","image/gif","image/png"].indexOf(file.type) == -1) {this.$message.error("請上傳正確的視頻/圖片格式");this.flag = false;// return false;}console.log("canshu", this.flag);return this.flag;},// 獲取七牛云tokenFileForQiNiu(param) {GetqiniuToken().then(response => {console.log("七牛云上傳", response);const key ="七牛云創建的文件夾名稱/" +this.formatTimestamp(new Date().getTime()) +"_" +param.file.size +param.file.name;const observable = qiniu.upload(param.file,key,response,{},{ useCdnDomain: true });observable.subscribe(res => {param.onProgress({ percent: res.total.percent });},err => console.error(err),res => {const newFileList = [...this.value,"https://域名/" + res.key];this.$emit("input", newFileList);});});},formatTimestamp(timestamp) {// 如果 timestamp 是字符串，嘗試轉換為數字const time = new Date(typeof timestamp === "string" ? parseInt(timestamp) : timestamp);// 獲取各個時間部分const year = time.getFullYear();const month = String(time.getMonth() + 1).padStart(2, "0"); // 月份從0開始，所以要+1const day = String(time.getDate()).padStart(2, "0");const hours = String(time.getHours()).padStart(2, "0");const minutes = String(time.getMinutes()).padStart(2, "0");const seconds = String(time.getSeconds()).padStart(2, "0");// 拼接成格式化的字符串return `${year}_${month}_${day}${hours}${minutes}${seconds}`;}}
};
</script>
<style lang="scss" scoped>
.warpss {display: inline-block;border: 1px dashed #dee5ed;margin-left: 13px;
}::v-deep.el-upload-list {display: none;
}.el-upload-video {width: 149px;height: 149px;border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;
}.el-upload-video-i {font-size: 20px;font-weight: bold;padding-top: 43px;color: #8c939d;width: 50px;height: 50px;line-height: 50px;text-align: center;
}//視頻
.img-list-item {position: relative;margin: auto;
}.img-list-item i.del-img {width: 20px;height: 20px;display: inline-block;background: rgba(0, 0, 0, 0.6);background-image: url(../../assets/images/close.png);//關閉按鈕圖標background-size: 18px;background-repeat: no-repeat;background-position: 50%;position: absolute;top: 0;right: -7px;
}
.imgBoxSty {// display: flex;// flex-wrap: wrap;// justify-content: flex-start;width: 100% !important;// border: 1px solid;// grid-gap: 40px 30px;
}
</style>

5.父組件引用

<template>
<div>
<div  v-for="(item, index) in form.resources" :key="index"><upload-img@input="handleImageChange(index, $event)":isShowImg="isShowImg":maxlength="item.imageArr.length":limit="1"w="100px"h="100px"v-model="item.imageArr"></upload-img>
</div></div>
</<template>import uploadImg from "@/components/UploadImg1/uploadImg.vue";export default {components: { uploadImg },data() {return {form:{isShowImg:true,resources:[{img: "",activityName: "",jumpType: "", //類型jumpLink: "", //商品/科普/運營/自我診療/外部鏈接參數path: "", //路徑imageArr: [] //拿到的圖片}]}}},methods: {handleImageChange(index, newValue) {// this.form.resources[index].imageArr = [newValue];// this.form.resources[index].img = newValue[0];// 使用Vue.set確保響應式更新this.$set(this.form.resources, index, {...this.form.resources[index],imageArr: newValue,img: newValue[0] || "" // 保持同步});this.$forceUpdate();console.log("獲取圖片數據", index, "圖片", newValue, this.form.resources);},}}