From 92f93fb7396cd7981276d401eb4345e6931e1fb7 Mon Sep 17 00:00:00 2001
From: long <515897141@qq.com>
Date: 星期五, 11 六月 2021 16:28:40 +0800
Subject: [PATCH] 添加上传文件组件、上传文件（自动上传）组件
---
src/components_simple/UploadSingleFile.vue | 114 ++++++++++++++++++++++
src/components_simple/UploadSingleFileAuto.vue | 180 ++++++++++++++++++++++++++++++++++++
2 files changed, 294 insertions(+), 0 deletions(-)
diff --git a/src/components_simple/UploadSingleFile.vue b/src/components_simple/UploadSingleFile.vue
new file mode 100644
index 0000000..4f4eba0
--- /dev/null
+++ b/src/components_simple/UploadSingleFile.vue
@@ -0,0 +1,114 @@
+<template>
+ <div>
+ <!-- 涓婁紶鏂囦欢缁勪欢(鍗�) -->
+ <el-upload
+ ref="refUploadFile"
+ :auto-upload="false"
+ action="#"
+ :limit="1"
+ :file-list="uploadFiles"
+ :on-change="addUploadFile"
+ :on-remove="delUploadFile"
+ :http-request="uploadFile"
+ :before-upload="beforeUploadFile"
+ size="mini"
+ >
+ <el-button style="display: block" :disabled="uploadFiles&&uploadFiles.length>0" class="mb8" type="primary" size="small" icon="el-icon-plus">涓婁紶鏂囦欢</el-button>
+ </el-upload>
+ </div>
+</template>
+
+<script>
+import mixin_upload from '@/mixins/upload.js' // 閫氱敤涓婁紶鏂囦欢棰勮
+export default {
+ mixins: [mixin_upload],
+ model: {
+ prop: 'uploadFiles',
+ event: 'change'
+ },
+ props: {
+ uploadFiles: {
+ type: Array,
+ default: () => {
+ return []
+ }
+ }
+
+ },
+
+ data() {
+ return {
+ callback: null
+ }
+ },
+
+ methods: {
+ // 涓婁紶鏂囦欢 鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌
+ // 涓婁紶鍓嶇‘璁ゆ牸寮�
+ beforeUploadFile(file) {
+ const isTooLarge = file.size / 1024 / 1024 > 50
+ let flag = true
+ if (isTooLarge) {
+ this.$message.error('璇峰嬁涓婁紶澶т簬50MB鐨勬枃浠�')
+ flag = false
+ }
+ return flag
+ },
+ // 澧炲姞鏂囦欢
+ addUploadFile(file, fileList) {
+ this.$emit('change', fileList)
+ },
+ // 鍒犻櫎鏂囦欢
+ delUploadFile(file, fileList) {
+ this.$emit('change', fileList)
+ },
+ // 鎵ц涓婁紶鍟嗗搧鍥�
+ runUploadFile(suc_cb) {
+ if (this.checkNeedUpload(this.uploadFiles)) {
+ this.callback = suc_cb
+ this.$refs.refUploadFile.submit()
+ } else {
+ suc_cb && suc_cb()
+ }
+ },
+ // 涓婁紶鏂囦欢
+ uploadFile(res) {
+ console.log(res)
+ const file = res.file
+ const formData = new FormData()
+ formData.append('file', file)
+ this.postFN({
+ url: 'admin/image/upload?type=3',
+ header: { 'Content-Type': 'multipart/form-data' },
+ params: formData,
+ mockData: {
+ code: 100,
+ msg: '',
+ data: {
+ path: '涓婁紶鏂囦欢鎴愬姛'
+ }
+ }
+ }, (inf) => {
+ // 鏇挎崲鎺夋湭涓婁紶鐨勬枃浠�
+ this.$emit('change', [{ name: '绱犳潗' + this.extname(inf.path), url: inf.path, status: 'success' }])
+
+ console.log('涓婁紶鏂囦欢鎴愬姛涓旂粨鏉�')
+
+ // 鎻愪氦
+ // this.$set(this.dialogData, 'path', inf.path)
+ this.callback && this.callback(inf.path)
+ })
+ },
+ // 鑾峰彇鏂囦欢鍚庣紑鍚�
+ extname(filename) {
+ if (!filename || typeof filename !== 'string') {
+ return ''
+ }
+ const a = filename.split('').reverse().join('')
+ const b = a.substring(0, a.search(/\./)).split('').reverse().join('')
+ return b
+ }
+ // 涓婁紶鏂囦欢 鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈
+ }
+}
+</script>
diff --git a/src/components_simple/UploadSingleFileAuto.vue b/src/components_simple/UploadSingleFileAuto.vue
new file mode 100644
index 0000000..ecda813
--- /dev/null
+++ b/src/components_simple/UploadSingleFileAuto.vue
@@ -0,0 +1,180 @@
+<template>
+ <div>
+ <!-- accept="video/mp4" -->
+ <el-upload
+ ref="refUploadFile"
+ action="#"
+ :before-upload="beforeUploadFile"
+ :limit="1"
+ :accept="accept"
+ :file-list="uploadFiles"
+ :on-change="addUploadImg"
+ :on-remove="delUploadImg"
+ :http-request="reqUploadFile"
+ style="width: 200px"
+ >
+ <el-button style="display: block" :disabled="uploadFiles&&uploadFiles.length>0" class="mb8" type="primary" size="small" icon="el-icon-plus">涓婁紶鏂囦欢</el-button>
+ <div @click.stop>
+ <!-- 瑙嗛 -->
+ <video
+ v-if="type===0&&uploadFiles.length"
+ class="com-up-video"
+ :src="uploadFiles[0].url"
+ controls="controls"
+ >鎮ㄧ殑娴忚鍣ㄤ笉鏀寔瑙嗛鎾斁</video>
+ <!-- 闊抽 -->
+ <audio
+ v-if="type===1&&uploadFiles.length"
+ :src="uploadFiles[0].url"
+ style="width: 230px;height: 40px;"
+ controls="controls"
+ />
+ <!-- 鍥剧墖 -->
+ <el-image
+ v-if="type===2&&uploadFiles.length"
+ class="com-up-video"
+ :src="uploadFiles[0].url"
+ fit="contain"
+ :preview-src-list="[uploadFiles[0].url]"
+ />
+ </div>
+ </el-upload>
+
+ <!-- upload鏀惧ぇ鍥剧墖 -->
+ <el-dialog :visible.sync="uploadPreviewVisible" append-to-body style="text-align:center">
+ <img style="max-width:100%" :src="uploadPreviewUrl" alt="">
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+import mixin_upload from '@/mixins/upload.js' // 閫氱敤涓婁紶鏂囦欢棰勮
+export default {
+ mixins: [mixin_upload],
+ model: {
+ prop: 'uploadFiles',
+ event: 'change'
+ },
+ props: {
+ uploadFiles: {
+ type: Array,
+ default: () => {
+ return []
+ }
+ },
+ // 0瑙嗛1闊抽2鍥剧墖
+ type: {
+ type: Number,
+ default: 0
+ }
+
+ },
+
+ data() {
+ return {
+ callback: null,
+ isCanAdd: true,
+ accept: 'video/mp4'
+ }
+ },
+ watch: {
+ type(type) {
+ if (this.type === 0) this.accept = 'video/mp4'
+ if (this.type === 1) this.accept = 'audio/mp3,audio/mpeg'
+ if (this.type === 2) this.accept = 'image/jpeg,image/jpg,image/gif,image/png'
+ }
+ },
+ methods: {
+ // 涓婁紶鏂囦欢 鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌
+ // 涓婁紶鍓嶅洖璋�
+ beforeUploadFile(file) {
+ if (this.type === 0) this.beforeUploadVideo(file)
+ if (this.type === 1) this.beforeUploadAudio(file)
+ if (this.type === 2) this.beforeUploadImg(file)
+ },
+ beforeUploadVideo(file) {
+ var fileSize = file.size / 1024 / 1024 < 50
+ if (['video/mp4'].indexOf(file.type) === -1) {
+ this.$message.error('蹇呴』鏄痬p4鏂囦欢')
+ return false
+ }
+ if (!fileSize) {
+ this.$message.error('瑙嗛澶у皬涓嶈兘瓒呰繃50MB')
+ return false
+ }
+ },
+ beforeUploadAudio(file) {
+ console.log('file.type', file.type)
+ var fileSize = file.size / 1024 / 1024 < 50
+ if (['audio/mp3'].indexOf(file.type) === -1 && ['audio/mpeg'].indexOf(file.type) === -1) {
+ this.$message.error('蹇呴』鏄痬p3鏂囦欢')
+ return false
+ }
+ if (!fileSize) {
+ this.$message.error('闊抽澶у皬涓嶈兘瓒呰繃50MB')
+ return false
+ }
+ },
+ beforeUploadImg(file) {
+ const isImg = file.type.indexOf('image/') > -1
+ const isTooLarge = file.size / 1024 / 1024 > 4
+ if (!isImg) {
+ this.$message.error('蹇呴』鏄�夋嫨鍥剧墖鏂囦欢')
+ return false
+ } else if (isTooLarge) {
+ this.$message.error('璇峰嬁涓婁紶澶т簬4MB鐨勫浘鐗�')
+ return false
+ }
+ },
+ // 澧炲姞鏂囦欢
+ addUploadImg(file, fileList) {
+ this.$emit('change', fileList)
+ console.log(fileList)
+ },
+ // 鍒犻櫎鏂囦欢
+ delUploadImg(file, fileList) {
+ this.$emit('change', fileList)
+ },
+
+ // 涓婁紶鏂囦欢 uploadType 0鍥剧墖1瑙嗛2闊抽
+ reqUploadFile(res) {
+ var uploadType = 0
+ if (this.type === 0) uploadType = 1
+ if (this.type === 1) uploadType = 2
+ if (this.type === 2) uploadType = 0
+ const file = res.file
+ const formData = new FormData()
+ formData.append('file', file)
+ this.postFN({
+ url: 'admin/image/upload?type=' + uploadType,
+ header: { 'Content-Type': 'multipart/form-data' },
+ params: formData,
+ mockData: {
+ code: 100,
+ msg: '',
+ data: {
+ // path: 'https://music.163.com/song/media/outer/url?id=1805088448.mp3'
+ path: 'https://www.w3school.com.cn/i/movie.mp4'
+ }
+ }
+ }, (inf) => {
+ // 鏇挎崲鎺夋湭涓婁紶鐨勫浘鐗�
+ this.$emit('change', [{ name: '绱犳潗', url: inf.path, status: 'success' }])
+
+ console.log('涓婁紶鏂囦欢鎴愬姛涓旂粨鏉�')
+
+ // 鎻愪氦
+ // this.$set(this.dialogData, 'imgUrl', inf.imgUrl)
+ this.callback && this.callback(inf.path)
+ })
+ }
+ // 涓婁紶鏂囦欢 鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈
+ }
+}
+</script>
+
+<style>
+.el-upload-list__item{
+ transition: none;
+}
+</style>
--
Gitblit v1.8.0