|
|
@@ -0,0 +1,244 @@
|
|
|
+<template>
|
|
|
+ <div class="file-upload">
|
|
|
+ <!--<el-progress style="margin-left: 5em" v-if="progressFlag" :percentage="loadProgress"></el-progress>-->
|
|
|
+ <el-upload
|
|
|
+ :disabled="disabled"
|
|
|
+ :auto-upload="autoUpload"
|
|
|
+ :action="action"
|
|
|
+ :name="name"
|
|
|
+ :data="data"
|
|
|
+ :http-request="uploadFile"
|
|
|
+ v-model:file-list="defaultFileList"
|
|
|
+ :show-file-list="showFileList"
|
|
|
+ :drag="drag"
|
|
|
+ :accept="accept"
|
|
|
+ :multiple="multiple"
|
|
|
+ :limit="limit"
|
|
|
+ :before-upload="before"
|
|
|
+ :on-success="success"
|
|
|
+ :on-error="error"
|
|
|
+ :on-preview="handlePreview"
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ :on-progress="onUploadProgress"
|
|
|
+ >
|
|
|
+ <slot>
|
|
|
+ <el-button type="primary" :disabled="disabled"
|
|
|
+ >上传视频</el-button
|
|
|
+ >
|
|
|
+ </slot>
|
|
|
+ <template #tip>
|
|
|
+ <div v-if="tip" class="el-upload__tip">{{ tip }}</div>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ <el-progress v-if="progressFlag" :percentage="loadProgress"></el-progress>
|
|
|
+ <span style="display: none !important"
|
|
|
+ ><el-input v-model="value"></el-input
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import config from "@/config/videoUpload";
|
|
|
+import request from '@/utils/httpRequest'
|
|
|
+
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ modelValue: { type: String, default: "" },
|
|
|
+ tip: { type: String, default: "" },
|
|
|
+ action: { type: String, default: "" },
|
|
|
+ apiObj: { type: Object, default: () => {} },
|
|
|
+ name: { type: String, default: config.filename },
|
|
|
+ data: { type: Object, default: () => {} },
|
|
|
+ accept: { type: String, default: "" },
|
|
|
+ maxSize: { type: Number, default: config.maxSize },
|
|
|
+ limit: { type: Number, default: 0 },
|
|
|
+ autoUpload: { type: Boolean, default: true },
|
|
|
+ showFileList: { type: Boolean, default: true },
|
|
|
+ drag: { type: Boolean, default: false },
|
|
|
+ multiple: { type: Boolean, default: true },
|
|
|
+ disabled: { type: Boolean, default: false },
|
|
|
+ onSuccess: {
|
|
|
+ type: Function,
|
|
|
+ default: () => {
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ progressFlag: false,
|
|
|
+ loadProgress: 0,
|
|
|
+ value: "",
|
|
|
+ defaultFileList: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ modelValue(val) {
|
|
|
+ if (val != this.toStr(this.defaultFileList)) {
|
|
|
+ this.defaultFileList = this.toArr(val);
|
|
|
+ this.value = val;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ defaultFileList: {
|
|
|
+ handler(val) {
|
|
|
+ this.$emit("update:modelValue", this.toStr(val));
|
|
|
+ this.value = this.toStr(val);
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //默认值转换为数组
|
|
|
+ toArr(str) {
|
|
|
+ var _arr = [];
|
|
|
+ var arr = str.split(",");
|
|
|
+ arr.forEach((item) => {
|
|
|
+ if (item) {
|
|
|
+ var urlArr = item.split("&name=");
|
|
|
+ var fileName = urlArr[urlArr.length - 1];
|
|
|
+ _arr.push({
|
|
|
+ name: fileName,
|
|
|
+ url: item,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return _arr;
|
|
|
+ },
|
|
|
+ onUploadProgress(file, fileList) {
|
|
|
+ console.log(file)
|
|
|
+ //刚开始上传的时候，可以拿到ready状态，给个定时器，让进度条显示
|
|
|
+ if (file.status === 'ready') {
|
|
|
+ this.progressFlag = true //进度条显示
|
|
|
+ const interval = setInterval(() => {
|
|
|
+ if (this.loadProgress >= 100) {
|
|
|
+ clearInterval(interval)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.loadProgress += 1 //进度条进度
|
|
|
+ }, 80)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //数组转换为原始值
|
|
|
+ toStr(arr) {
|
|
|
+ return arr.map((v) => v.url).join(",");
|
|
|
+ },
|
|
|
+ before(file) {
|
|
|
+ console.log(this.maxSize)
|
|
|
+ const maxSize = file.size / 1024 / 1024 < this.maxSize;
|
|
|
+ console.log(maxSize)
|
|
|
+ if (!maxSize) {
|
|
|
+ this.$message.warning(
|
|
|
+ `上传文件大小不能超过 ${this.maxSize}MB!`
|
|
|
+ );
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ success(res, file) {
|
|
|
+ var os = this.onSuccess(res, file);
|
|
|
+ if (os != undefined && os == false) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ var response = config.parseData(res);
|
|
|
+ file.url = response.src;
|
|
|
+ },
|
|
|
+ error(err) {
|
|
|
+ this.$notify.error({
|
|
|
+ title: "上传文件未成功",
|
|
|
+ message: err,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ beforeRemove(uploadFile) {
|
|
|
+ return this.$confirm(`是否移除 ${uploadFile.name} ?`, "提示", {
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ return true;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleExceed() {
|
|
|
+ this.$message.warning(
|
|
|
+ `当前设置最多上传 ${this.limit} 个文件，请移除后上传!`
|
|
|
+ );
|
|
|
+ },
|
|
|
+ handlePreview(uploadFile) {
|
|
|
+ window.open(uploadFile.url);
|
|
|
+ },
|
|
|
+ /*request(param) {
|
|
|
+ var apiObj = config.apiObj;
|
|
|
+ if (this.apiObj) {
|
|
|
+ apiObj = this.apiObj;
|
|
|
+ }
|
|
|
+ const data = new FormData();
|
|
|
+ data.append(param.filename, param.file);
|
|
|
+ for (const key in param.data) {
|
|
|
+ data.append(key, param.data[key]);
|
|
|
+ }
|
|
|
+ console.log(apiObj)
|
|
|
+ apiObj
|
|
|
+ .upload(data, {
|
|
|
+ onUploadProgress: (e) => {
|
|
|
+ console.log(e)
|
|
|
+ const complete = parseInt(
|
|
|
+ ((e.loaded / e.total) * 100) | 0,
|
|
|
+ 80
|
|
|
+ );
|
|
|
+ this.loadProgress = complete;
|
|
|
+ console.log(complete)
|
|
|
+ param.onProgress({ percent: complete });
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ param.onSuccess(res);
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ // param.onError(err)
|
|
|
+ });
|
|
|
+ },*/
|
|
|
+ // 覆盖默认的上传行为，可以自定义上传的实现
|
|
|
+ async uploadFile(param) {
|
|
|
+ // param.file就是上传文件本身
|
|
|
+
|
|
|
+ const formData = new FormData()
|
|
|
+ formData.append('file', param.file)
|
|
|
+ formData.append('PHP_SESSION_UPLOAD_PROGRESS', 'file1')
|
|
|
+
|
|
|
+ // 发起请求
|
|
|
+ request({
|
|
|
+ method: 'post',
|
|
|
+ // 上传地址，因为我这里的request请求是自己封装过的，所以就只需要填写接口后面的地址即可
|
|
|
+ url: `${request.BASE_URL}/file/videoUpload`,
|
|
|
+ data: formData,
|
|
|
+ // 重点一：complete就是处理后的上传进度数值1-100
|
|
|
+ onUploadProgress: progressEvent => {
|
|
|
+ const complete = parseInt(
|
|
|
+ ((progressEvent.loaded / progressEvent.total) * 100) | 0,
|
|
|
+ 10
|
|
|
+ )
|
|
|
+ // 重点二：onProgress()方法需要以上方接收的形参来调用
|
|
|
+ // 这个方法有一个参数"percent"，给他进度值 complete 即可
|
|
|
+ param.onProgress({ percent: complete })
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ param.onSuccess(res);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.el-form-item.is-error .file-upload:deep(.el-upload-dragger) {
|
|
|
+ border-color: var(--el-color-danger);
|
|
|
+}
|
|
|
+.file-upload {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.file-upload:deep(.el-upload-list__item) {
|
|
|
+ transition: none !important;
|
|
|
+}
|
|
|
+</style>
|
user5