修复腾讯云上传
This commit is contained in:
liaozetao
195
src/views/TencentUploadAdminView.vue
Normal file
195
src/views/TencentUploadAdminView.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<section class="content">
|
||||
<div class="box box-primary">
|
||||
<div class="box-body">
|
||||
<section class="content-header">
|
||||
<h1 id="itemTitle"></h1>
|
||||
</section>
|
||||
<!-- .content -->
|
||||
<div id="table"></div>
|
||||
<div id="toolbar">
|
||||
<br />
|
||||
<br />
|
||||
<button id="updateImgs" class="btn btn-sm btn-primary">上传文件</button>
|
||||
<h3 id="urlInfo"></h3>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class=" modal fade" id="fileUpload" tabindex="-1" role="dialog" aria-labelledby="modalLabel1">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
|
||||
aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title" id="modalLabel1">上传文件</h4>
|
||||
</div>
|
||||
<div class="modal-footer" style="height: 20%">
|
||||
<span>上传文件</span>
|
||||
<!--<input type="file" name="file" id="uploadFile">-->
|
||||
<input type="file" name="logoFile1" id="logoFile1" onchange="setFiles(this);" style="display:inline;"
|
||||
multiple>
|
||||
<!--<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>-->
|
||||
<!--<button type="button" class="btn btn-primary" id="upload">上传七牛</button>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "TencentUploadAdminView",
|
||||
setup() {
|
||||
|
||||
function setFiles(obj) {
|
||||
$("#confirmMsg").text("正在上传，请稍后");
|
||||
$("#confirmModal").modal('show');
|
||||
var f = $(obj).val();
|
||||
if (f == null || f == undefined || f == '') {
|
||||
return false;
|
||||
}
|
||||
var filePaths = $(obj)[0].files;
|
||||
var num = filePaths.length;
|
||||
var data = new FormData();
|
||||
for (var i = 0; i <= num - 1; i++) {
|
||||
var file = $(obj)[0].files[i];
|
||||
data.append('file_' + i, file);
|
||||
}
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/admin/tencent/cos/uploadPatch",
|
||||
data: data,
|
||||
cache: false,
|
||||
contentType: false, //不可缺
|
||||
processData: false, //不可缺
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
$("#logoFile1").val("");
|
||||
$("#confirmModal").modal('hide');
|
||||
$("#fileUpload").modal('hide');
|
||||
console.log(res)
|
||||
if (res.code == 200) {
|
||||
$("#tipMsg").text("上传成功");
|
||||
$("#tipModal").modal('show');
|
||||
buildResult(res.data);
|
||||
} else {
|
||||
$("#tipMsg").text("上传失败.");
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
window.setFiles = setFiles;
|
||||
return {
|
||||
setFiles
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(function () {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
$("#updateImgs").click(function () {
|
||||
$("#uploadFile").val("");
|
||||
$("#fileUpload").modal('show');
|
||||
});
|
||||
|
||||
$("#upload").click(function () {
|
||||
$.ajaxFileUpload({
|
||||
fileElementId: 'uploadFile', //需要上传的文件域的ID，即<input type="file">的ID。
|
||||
url: "/admin/tencent/cos/upload", //后台方法的路径
|
||||
type: 'post', //当要提交自定义参数时，这个参数要设置成post
|
||||
dataType: 'json', //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
|
||||
secureuri: false, //是否启用安全提交，默认为false。
|
||||
async: true, //是否是异步
|
||||
success: function (json) { //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
|
||||
console.log(json)
|
||||
if (json.flag) {
|
||||
$("#urlInfo").html(json.url);
|
||||
$("#tipMsg").text("上传成功");
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
else {
|
||||
$("#tipMsg").text("上传失败.");
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
$("#faceJsonImgsUpload").modal('hide');
|
||||
},
|
||||
error: function (data, status, e) { //提交失败自动执行的处理函数。
|
||||
console.error(e);
|
||||
$("#tipMsg").text("上传失败");
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
function buildResult(data) {
|
||||
var $urlInfo = $('#urlInfo');
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var $p = $('<p />');
|
||||
$p.html(data[i]);
|
||||
$urlInfo.append($p);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bar1, .bar2 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
label.col-sm-1 {
|
||||
padding: 0;
|
||||
line-height: 30px;
|
||||
text-align: right;
|
||||
/*padding-right: 4px;*/
|
||||
}
|
||||
|
||||
label.col-sm-1 {
|
||||
padding: 0;
|
||||
line-height: 30px;
|
||||
text-align: right;
|
||||
/*padding-right: 4px;*/
|
||||
}
|
||||
|
||||
input, select {
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.button-wrapper {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.record {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.record .title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.toggle-group {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 13px;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.opt-group .col-sm-7 {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user