dd_pc/src/components/upload.vue

<template>
	<div>
		<el-upload
			ref="upload_com"
			:headers="headers"
			:action="action"
			:show-file-list="showFileList"
			:file-list="fileList"
			:on-success="_onSuccess"
			:on-preview="_onPreview"
			:http-request="oss_upload"
			:on-remove="_onRemove"
			:before-remove="_onBeforeRemove"
			:before-upload="_beforeUpload"
			:on-exceed="_onExceed"
			:limit="limit"
			:on-change="handleChange"
			:multiple="multiple"
		>
			<slot></slot>
			<slot name="tip"></slot>
		</el-upload>
		<el-progress v-show="showProcess" :percentage="processLength" :stroke-width="2"></el-progress>
	</div>
</template>

<script>
function noop() {}
import moment from 'moment';
import axios from 'axios';
export default {
	props: {
		action: {
			//必选参数，上传的地址
			type: String,
			required: true
		},
		headers: {
			//设置上传的请求头部
			type: Object,
			default() {
				return {};
			}
		},
		data: Object, //上传时附带的额外参数
		multiple: Boolean, //是否支持多选文件
		name: {
			//上传的文件字段名
			type: String,
			default: 'file'
		},
		drag: Boolean, //是否启用拖拽上传
		showFileList: {
			//是否显示已上传文件列表
			type: Boolean,
			default: false
		},
		accept: String, //	接受上传的文件类型（thumbnail-mode 模式下此参数无效）

		beforeUpload: Function, //	上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
		onRemove: {
			//文件列表移除文件时的钩子
			type: Function,
			default: noop
		},
		onBeforeRemove: {
			//删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
			type: Function,
			default: noop
		},
		onPreview: {
			//点击文件列表中已上传的文件时的钩子
			type: Function
		},
		onSuccess: {
			//文件上传成功时的钩子
			type: Function,
			default: noop
		},
		fileList: {
			//必选参数，上传的地址
			type: Array,
			default() {
				return [];
			}
		},
		limit: {
			//必选参数，上传的地址
			type: Number,
			default: () => {
				return 1;
			}
		},
		onExceed: {
			//必选参数，上传的地址
			type: Function,
			default: noop
		}
	},
	name: 'upload',
	data() {
		return {
			processLength: 0,
			showProcess: false,
			files: {},
			config: null
		};
	},
	methods: {
		handleChange(file, fileList) {
			this.files = file;
		},
		handleChanges(file) {
			if (file.status === 'ready') {
				this.processLength = 0;
				this.showProcess = true;
				const interval = setInterval(() => {
					if (this.processLength >= 99) {
						clearInterval(interval);
						return;
					}
					this.processLength += 1;
				}, 20);
			}
			if (file.status === 'success') {
				this.processLength = 100;
				this.showProcess = false;
			}
		},
		get_sign(callback) {
			axios
				.get('https://intesys.cms.g107.com/integral.php/Api/get_signature', {
					headers: {
						'Content-Type': 'application/json; charset=utf-8',
						'A-Token': this.$getToken()
					}
				})
				.then(res => {
					this.config = res.data.data;
					callback();
				});
		},
		_beforeUpload(file) {
			if (!this.beforeUpload(file)) {
				return false;
			} else {
				this.handleChanges(this.files);
			}
		},
		oss_upload(upload_obj) {
			let self = this;
			this.get_sign(function() {
				self.upload(upload_obj.file);
			});
		},
		_onExceed(files, fileList) {
			this.$message.warning(`最多选择 ${this.limit} 个文件`);
		},
		_onSuccess(response, file, fileList) {
			this.onSuccess(response, file, fileList);
		},
		_onPreview(file) {
			this.onPreview(file);
		},
		_onRemove(file, fileList) {
			this.onRemove(file, fileList);
		},
		_onBeforeRemove(file, fileList) {
			if (file.status == 'success') {
				return this.$confirm(`确定移除此项？`);
			}
		},
		random_string(len) {
			len = len || 32;
			var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
			var maxPos = chars.length;
			var pwd = '';
			for (let i = 0; i < len; i++) {
				pwd += chars.charAt(Math.floor(Math.random() * maxPos));
			}
			return pwd;
		},
		upload(item) {
			let self = this;
			const photo = item; // 获取图片对象
			const photoName = item.name; // 原图片的名称
			const url = 'https://integralsys.oss-cn-shenzhen.aliyuncs.com';
			let date = moment().format('YYYY/MM/DD');
			let param = new FormData();
			let randomStr = this.random_string(32);
			let key = 'intesys/dd/' + this.$getUserData().site_id + '/' + date + '/' + randomStr + '.png';
			param.append('Filename', photoName);
			param.append('key', key);
			param.append('policy', this.config.policy);
			param.append('OSSAccessKeyId', this.config.accessid);
			param.append('success_action_status', '200'); // 不要问为什么，照做
			param.append('callback', this.config.callback);
			param.append('signature', this.config.signature);
			param.append('file', photo); // 这个**切记**一定要放到最后去 append ，不然阿里云会一直报 key 的错误
			axios.post(url, param, {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				})
				.then(response => {
					if (response.data.Status == 'Ok') {
						this.processLength = 100;
						this.showProcess = false;
						setTimeout(() => {
							this.processLength = 0;
						}, 200);
						self.fileList.push({
							name: randomStr + photoName,
							url: 'https://integralsys.oss-cn-shenzhen.aliyuncs.com/' + key,
							name: item.name,
							response: {
								url: 'https://integralsys.oss-cn-shenzhen.aliyuncs.com/' + key
							}
						});
						self._onSuccess({ status: 1, url: 'https://integralsys.oss-cn-shenzhen.aliyuncs.com/' + key, file_name: randomStr + photoName }, item, self.fileList);
					}
				})
				.catch(err => {
					this.showProcess = false;
				});
		}
	}
};
</script>

<style scoped></style>