增加上传文件取消提示
This commit is contained in:
parent
10ae05ce75
commit
e6d421dfb1
|
|
@ -3,13 +3,13 @@ ENV = 'production'
|
|||
# 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置
|
||||
# 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
|
||||
# 测试
|
||||
# VUE_APP_BASE_API = 'https://admintestpapi.sxczgkj.cn'
|
||||
VUE_APP_BASE_API = 'https://admintestpapi.sxczgkj.cn'
|
||||
|
||||
# 生产
|
||||
# VUE_APP_BASE_API = 'https://cashieradmin.sxczgkj.cn'
|
||||
|
||||
# 预发布接口
|
||||
VUE_APP_BASE_API = 'https://pre-cashieradmin.sxczgkj.cn'
|
||||
# VUE_APP_BASE_API = 'https://pre-cashieradmin.sxczgkj.cn'
|
||||
|
||||
# VUE_APP_BASE_API = 'http://192.168.2.98:8000'
|
||||
# 如果接口是 http 形式， wss 需要改为 ws
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ const $config = {
|
|||
accessKeySecret: "",
|
||||
bucket: "cashier-oss"
|
||||
}
|
||||
import { Notification } from 'element-ui'
|
||||
|
||||
async function uploadAndDownloadFile(name, file, headers) {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
|
|
@ -39,16 +41,16 @@ class ossClient {
|
|||
refreshSTSTokenInterval: 3600 * 1000
|
||||
});
|
||||
}
|
||||
async upload(name, file, progressCallback) {
|
||||
async upload(name, file, progressCallback) {
|
||||
try {
|
||||
let options = {
|
||||
// 获取分片上传进度、断点和返回值。
|
||||
progress: progressCallback,
|
||||
headers:$headers
|
||||
headers: $headers
|
||||
}
|
||||
const {
|
||||
res: resp
|
||||
} = await this.ossClient.put(name, file,options).catch(error => {
|
||||
} = await this.ossClient.put(name, file, options).catch(error => {
|
||||
reject(error);
|
||||
})
|
||||
return resp.requestUrls
|
||||
|
|
@ -81,10 +83,21 @@ class ossClient {
|
|||
res: resp
|
||||
} = await this.ossClient.multipartUpload(name ? name : file.name, file, options)
|
||||
// return resp.requestUrls
|
||||
console.log('------resp---');
|
||||
console.log(resp)
|
||||
return `${resp.requestUrls[0]}`.split('?')[0]
|
||||
} catch (e) {
|
||||
console.log('------e---');
|
||||
console.log(e);
|
||||
if (e.name == 'cancel') {
|
||||
Notification.error({
|
||||
title: '上传已取消',
|
||||
duration: 3000
|
||||
})
|
||||
return e
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -94,8 +107,15 @@ class ossClient {
|
|||
* @param {Object} uploadId
|
||||
* @param {Object} name
|
||||
*/
|
||||
abortUpload(uploadId, name) {
|
||||
this.client.abortMultipartUpload(name, uploadId)
|
||||
async abortUpload(uploadId, name) {
|
||||
try {
|
||||
const res=await this.ossClient.abortMultipartUpload(name, uploadId)
|
||||
return res
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
return error
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
|
||||
<el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size" @size-change="sizeChange"
|
||||
@current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -76,6 +76,10 @@ export default {
|
|||
|
||||
},
|
||||
methods: {
|
||||
sizeChange(e){
|
||||
this.tableData.size = e
|
||||
this.getTableData()
|
||||
},
|
||||
saleEndTimeFilter: (a, b) => {
|
||||
|
||||
var currentDate = new Date(); // 当前日期对象
|
||||
|
|
|
|||
|
|
@ -4,11 +4,9 @@
|
|||
width="500px"
|
||||
:visible.sync="dialogVisible"
|
||||
@close="diaClose"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-click-modal="true"
|
||||
>
|
||||
<div class="progress" v-if="loading">
|
||||
<el-progress type="circle" :percentage="progress"></el-progress>
|
||||
</div>
|
||||
|
||||
<el-form
|
||||
:element-loading-text="loadingText"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
|
|
@ -18,6 +16,9 @@
|
|||
label-width="120px"
|
||||
label-position="left"
|
||||
>
|
||||
<div class="progress" v-if="loading">
|
||||
<el-progress type="circle" :percentage="progress"></el-progress>
|
||||
</div>
|
||||
<el-form-item label="平台">
|
||||
<el-select
|
||||
v-model="form.source"
|
||||
|
|
@ -133,7 +134,8 @@ export default {
|
|||
diaClose() {
|
||||
this.$refs.uploadFile.clearFiles();
|
||||
this.restForm();
|
||||
cancelToken();
|
||||
// cancelToken();
|
||||
this.ossClient.abortUpload()
|
||||
},
|
||||
uploadSuccess(res) {
|
||||
this.form.img = res[0];
|
||||
|
|
@ -152,7 +154,7 @@ export default {
|
|||
let fileRes = "";
|
||||
const file = this.$refs.uploadFile.getFileList();
|
||||
console.log(file);
|
||||
if (!this.hasUpload && file && file.status != "finished") {
|
||||
if (Object.prototype.toString.call(file)=== '[object File]') {
|
||||
this.loadingText = "文件上传中，请耐心等待...";
|
||||
this.loading = true;
|
||||
// fileRes = await $uploadVersionFile(file, { name: version });
|
||||
|
|
@ -161,13 +163,13 @@ export default {
|
|||
file,
|
||||
(p) => {
|
||||
this.progress = Math.floor(p * 100);
|
||||
console.log("Progress: " + p * 100 + "%");
|
||||
// 这里可以根据进度做相应的处理，例如更新UI等
|
||||
}
|
||||
);
|
||||
console.log(fileRes);
|
||||
if (!fileRes) {
|
||||
this.loading = false;
|
||||
this.progress = 0;
|
||||
this.$notify({
|
||||
title: "失败",
|
||||
message: `上传阿里云失败`,
|
||||
|
|
@ -175,9 +177,11 @@ export default {
|
|||
});
|
||||
return;
|
||||
}
|
||||
if(fileRes.name=='cancel'){
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
this.progress = 0;
|
||||
let res = "";
|
||||
if (this.form.id) {
|
||||
//编辑
|
||||
|
|
@ -206,7 +210,7 @@ export default {
|
|||
});
|
||||
}
|
||||
this.loading = false;
|
||||
|
||||
this.progress = 0;
|
||||
this.close();
|
||||
|
||||
this.$emit("success", res);
|
||||
|
|
|
|||
Loading…
Reference in New Issue