import axios from 'axios' let OSS = require('ali-oss'); export default { mounted() { }, data() { return { uploadFileList: [], fileUploadCallBackParams: {return_data: {data: {}, status: 0}, upload_id: ""}, tempCheckpoint: {}, uploadPercentage: 0, oosClient: null, isUploading: false } }, methods: { uploadFileChange(file) { console.log(file); if (file.size / 1024 > 1024 * 1000) { this.$message.error("作品大小不得超过1G,请重新选择"); this.$refs.upload.clearFiles(); return false; } this.prepareUpload(file); }, initUpload(file) { if (this.isUploading) { this.oosClient.cancel(); } this.uploadPercentage = 0; this.uploadFileList = []; if (file) this.uploadFileList.push({name: file.name, url: "", path: ""}); }, uploadFileOnProgress(event, file, fileList) { }, uploadFileDelete(file = null) { this.initUpload(); }, /** * 上传文件出错 */ uploadFileError() { }, /** * 预上传 * @param file * @param callback */ prepareUpload(file) { //初始化上传状态 this.initUpload(file); const formData = new FormData(); let wid = this.$route.query.wid; formData.append("target", `{ "type": 5 ,"work_id":${wid || -1}}`); formData.append("filename", file.name); this.$axios.$post(`/file/prepareUpload`, formData, {headers: {"Content-Type": "multipart/form-data"}}).then(data => { console.log("data", data); this.fileUploadCallBackParams.upload_id = data.data.upload_id; this.fileUploadCallBackParams.return_data.data._upload_id = data.data.upload_id; // this._ossUpload(data.data, file); this._ossMultipartUpload(data.data, file) }).catch(err => { }); }, /** * 阿里云上传 * @param data * @param file * @private */ _ossUpload(data, file) { try { this.oosClient = OSS({ region: "oss-cn-beijing", // 阿里云主账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维,请登录RAM控制台创建RAM账号。 accessKeyId: data.sts.Credentials.AccessKeyId, accessKeySecret: data.sts.Credentials.AccessKeySecret, stsToken: data.sts.Credentials.SecurityToken, bucket: data.post_params.bucket }); // object-key可以自定义为文件名(例如file.txt)或目录(例如abc/test/file.txt)的形式,实现将文件上传至当前Bucket或Bucket下的指定目录。 this.oosClient.put(data.post_params.policy['save-key'], file.raw).then(res => { console.log("*******", res); if (res.res.status === 200) { this.setUploadComplete(res, file); } }).catch(err => { console.log(err); }); } catch (e) { console.log(e); } }, _ossMultipartUpload(data, file) { try { this.oosClient = OSS({ region: "oss-cn-beijing", // 阿里云主账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维,请登录RAM控制台创建RAM账号。 accessKeyId: data.sts.Credentials.AccessKeyId, accessKeySecret: data.sts.Credentials.AccessKeySecret, stsToken: data.sts.Credentials.SecurityToken, bucket: data.post_params.bucket }); let tempCheckpoint; // object-key可以自定义为文件名(例如file.txt)或目录(例如abc/test/file.txt)的形式,实现将文件上传至当前Bucket或Bucket下的指定目录。 this.oosClient.multipartUpload(data.post_params.policy['save-key'], file.raw, { progress: (p, checkpoint) => { // 断点记录点。浏览器重启后无法直接继续上传,您需要手动触发上传操作。 tempCheckpoint = checkpoint; this.uploadPercentage = p * 100; this.isUploading = p !== 1; console.log(this.uploadPercentage); }, meta: {year: 2020, people: 'test'}, mime: file.type, }).then(res => { console.log("multipartUpload res", res); this.setUploadComplete(res, file); }).catch(err => { console.log("multipartUpload err", err); }) } catch (e) { console.log(e); } }, /** * 设置上传结果检查的参数 * @param res * @param file */ setUploadComplete(res, file) { this.fileUploadCallBackParams.return_data.status = 1; this.fileUploadCallBackParams.return_data.data.url = "https:\/\/filescdn.proginn.com/" + res.name; this.fileUploadCallBackParams.return_data.data.path = res.name; this.fileUploadCallBackParams.return_data.data.size = file.size; this.fileUploadCallBackParams.return_data.data.name = file.name; this.fileUploadCallBackParams.return_data = JSON.stringify(this.fileUploadCallBackParams.return_data); console.log("~~~~~~~~~~~~~~", this.fileUploadCallBackParams); this.uploadCallBack(); }, /** * 阿里云上传回调 */ uploadCallBack() { this.$axios.$post("/file/uploadCallBack", this.fileUploadCallBackParams).then((res) => { this.fileUploadCallBackParams = {return_data: {data: {}, status: 0}, upload_id: ""}; if (res.status === 1) { this.uploadFileList = []; this.uploadFileList.push({name: res.data.name, url: res.data.url, path: res.data.path}); this.$message.success("上传成功"); } else { this.$message.success(`上传失败-${res.info}`); } }).catch(err => { console.log(err); }) }, } }