關於上傳圖片和視訊的上傳元件
阿新 • • 發佈:2018-12-16
1.upload元件
<template> <div class="uploadPicture"> <div class="imgList" v-for="(item,index) of imgList"> <video v-if="item.fragmentType === 2" :src="item.newsFileUrl || item.fragmentUrl"></video> <img v-else :src="item.newsFileUrl || item.photoUrl"/> <div class="mask"> <i class="el-icon-view" @click="preview(item)"></i> <i class="el-icon-delete2" v-if="disabled" @click="deletes(index)"></i> </div> <i></i> </div> <div class="uploadBut" v-if="disabled && imgList.length < length" v-loading.body="isLoading"> <input type="file" @change="filechange($event)"/> <span v-if="!isLoading">+</span> </div> <!--//預覽圖片--> <el-dialog v-model="dialogVisible" size="tiny"> <img v-if="dialog.fragmentType ===1" width="100%" :src="dialog.newsFileUrl || dialog.photoUrl"/> <video v-if="dialog.fragmentType === 2" width="100%" controls="controls" :src="dialog.newsFileUrl || dialog.fragmentUrl"></video> </el-dialog> </div> </template> <script> import { async } from "@/config/fetch"; export default { props: { value: { default: function() { return ""; } }, disabled: { default: function() { return true; } }, length: { default: function() { return 7; } }, type: { default: function() { return 1; //0 可傳圖片和視訊 1只能傳圖片 2只能傳視訊 } }, fileType: { default: function() { return "內容"; // } } }, data() { return { imgList: [], isLoading: false, dialogVisible: false, dialog: {}, valueName: "" }; }, computed: {}, methods: { //刪除 deletes(index) { this.imgList.splice(index, 1); this.$emit("upload", this.imgList); }, //檢視 preview(data) { this.dialog = data; this.dialogVisible = true; }, // fileAjax(files, state) { const _this = this; if (typeof FileReader === "undefined") { this.$notify.error({ title: "錯誤", message: "抱歉,你的瀏覽器不支援 FileReader" }); } else { this.isLoading = true; var data = new FormData(); data.append("files", files); data.append("valueName", this.fileType); var fileUrl = "/newsController/uploadNewsFile.do"; if (this.type == 1) { fileUrl = "/newsController/uploadNewsBanner.do"; } async(fileUrl, data, "FORM", { contentType: "" }) .then(data => { var red = data.data[0]; _this.isLoading = false; _this.$notify({ title: "成功", message: "上傳成功", type: "success" }); if (state === 1) { if (_this.type == 1) { _this.imgList.push({ compressPhotoUrlWidth: red.compressPhotoUrlWidth, photoUrlHeight: red.photoUrlHeight, photoUrlWidth: red.photoUrlWidth, photoUrl: red.photoUrl, compressPhotoUrlHeight: red.compressPhotoUrlHeight, compressPhotoUrl: red.compressPhotoUrl, fragmentType: 1 }); } else { _this.imgList.push({ newsFileUrl: red.newsFileUrl, width: red.width, height: red.height, fragmentType: 1 }); } } else { _this.imgList.push({ newsFileUrl: red.newsFileUrl, width: red.width, height: red.height, videoLength: red.videoLength, fragmentType: 2 }); } console.log(JSON.parse(JSON.stringify(_this.imgList))); _this.$emit("input", _this.imgList); }) .catch(function(err) { console.log(err); _this.isLoading = false; _this.$notify.error({ title: "錯誤", message: "上傳失敗" }); }); } }, //上傳圖片 filechange(e) { const _this = this; const files = e.target.files || e.dataTransfer.files; if (!files.length) { return false; } // const patnImg = /\.jpg$|\.jpeg$|\.png$|\.gif$/; const patnImg = /\.jpg$|\.JPG$|\.jpeg$|\.png$|\.gif$/; if (this.type == 1) { if (patnImg.test(files[0].name)) { this.fileAjax(files[0], 1); } else { _this.$notify.error({ title: "錯誤", message: "只能上傳jpg、jpeg、png、gif格式圖片" }); } } else if (this.type == 2) { if (/\.mp4$|\.mpeg$|\.3gp$/.test(files[0].name)) { this.fileAjax(files[0], 2); } else { _this.$notify.error({ title: "錯誤", message: "只能上傳mp4、mpeg、3gp格式視訊" }); } } else { if (patnImg.test(files[0].name)) { this.fileAjax(files[0], 1); } else if (/\.mp4$|\.mpeg$|\.3gp$/.test(files[0].name)) { this.fileAjax(files[0], 2); } else { _this.$notify.error({ title: "錯誤", message: "只能上傳jpg、jpeg、png、gif格式圖片或mp4、mpeg、3gp格式視訊" }); } } } }, watch: { value(val) { if (val instanceof Array) { this.imgList = val; } else { if (val) { this.imgList = val.split(","); } } } }, mounted() { if (this.value instanceof Array) { this.imgList = this.value; } else { if (this.value) { this.imgList = this.value.split(","); } } } }; </script> <style scoped lang="scss"> .uploadPicture { display: flex; .uploadBut { background-color: #fbfdff; border: 1px dashed #c0ccda; border-radius: 6px; box-sizing: border-box; width: 120px; height: 120px; cursor: pointer; line-height: 120px; vertical-align: top; font-size: 60px; text-align: center; color: #999; margin-right: 15px; position: relative; input { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0; cursor: pointer; } } .imgList { background-color: #fbfdff; border-radius: 6px; box-sizing: border-box; width: 120px; height: 120px; cursor: pointer; line-height: 120px; vertical-align: top; overflow: hidden; position: relative; margin-right: 15px; box-shadow: 0px 1px 2px 2px #dfdfdf; img { position: absolute; left: 0px; top: 50%; transform: translateY(-50%); width: 100%; } video { width: 120px; height: 120px; } .mask { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); opacity: 0; border-radius: 6px; transition: all 0.5s; text-align: center; i { color: #fff; margin: 0px 5px; font-size: 20px; } } } .imgList:hover { .mask { opacity: 1; } } } </style>
2.引入元件之後使用
<z-upload v-model="banner" @preview="enlarge" length="1" fileType="內容"></z-upload>