修改上传代码

This commit is contained in:
liaozetao
2024-01-09 15:47:01 +08:00
parent fdc01127e2
commit 39f1ad026c
2 changed files with 77 additions and 106 deletions

View File

@@ -23,9 +23,10 @@ export const uploadFile = id => {
});
};
export const uploadGift = (id) => {
export const uploadGift = (file) => {
let formData = new FormData();
formData.append('file', $(id)[0].files[0]);
console.log(file);
formData.append('file', file);
return new Promise((resolve, reject) => {
request.post('/admin/gift/upload', formData).then(res => {
resolve(res);

View File

@@ -288,7 +288,7 @@
<label class="col-sm-2 control-label">礼物图片:</label>
<div class="col-sm-10">
<img src="" id="picImage" style="width:250px;height:90px;" alt="">
<input type="file" id="picUploadFile" name="file">
<input type="file" id="picUploadFile" name="file" @change="changeFile($event)">
<button class="btn btn-success" type="button" id="picUploadBtn">上传</button>
<input type="hidden" id="picUrl" name="picUrl" class="form-control validate[required]" />
<span id="picImgInfo" style="color:red;"></span>
@@ -551,10 +551,16 @@
<script>
import TableHelper from '@/utils/bootstrap-table-helper';
import ComboboxHelper from '@/assets/plugins/bootstrap-combobox/js/bootstrap-combobox-helper';
import { formatTime, showLoading, hideLoading } from '@/utils/maintainer';
import { formatTime, showLoading, hideLoading, apiResult } from '@/utils/maintainer';
import { uploadGift } from '@/api/common/upload';
export default {
name: "GiftManageView",
data() {
return {
files: {},
};
},
setup() {
function selectConsumeChange(obj) {
var val = $('#consumeType').val();
@@ -594,9 +600,15 @@ export default {
});
},
methods: {
changeFile(event) {
console.log(event);
let target = event.target;
let id = target.id;
this.files[id] = target.files[0];
},
initData() {
let $this = this;
$(function () {
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
columns: [
@@ -819,6 +831,7 @@ export default {
$("#gift-add").click(function () {
// 打开编辑弹窗
$("#giftModal").modal('show');
$this.files = {};
$("#giftForm")[0].reset();
$('#picUrl').val('');
@@ -979,122 +992,78 @@ export default {
$('#picUploadBtn').on('click', function () {
showLoading();
$.ajaxFileUpload({
fileElementId: 'picUploadFile', //需要上传的文件域的ID即<input type="file">的ID。
url: '/admin/gift/upload', //后台方法的路径
type: 'post', //当要提交自定义参数时这个参数要设置成post
dataType: 'json', //服务器返回的数据类型。可以为xml,script,json,html。如果不填写jQuery会自动判断。
secureuri: false, //是否启用安全提交默认为false。
async: true, //是否是异步
success: function (json) { //提交成功后自动执行的处理函数参数data就是服务器返回的数据。
if (json.path) {
$('#picUrl').val(json.path);
$('#picImage').attr("src", json.path);
if (json.path != '') {
$("#picImgInfo").html('已上传成功');
} else {
$("#picImgInfo").html('未上传成功');
}
console.log(json.path);
hideLoading();
} else {
$("#tipMsg").text(json.msg);
$("#tipModal").modal('show');
hideLoading();
}
},
error: function (data, status, e) { //提交失败自动执行的处理函数。
console.error(e);
hideLoading();
uploadGift($this.files['picUploadFile']).then(res => {
let path = res.path;
console.log(path);
$('#picUrl').val(path);
$('#picImage').attr("src", path);
if (path != '') {
$("#picImgInfo").html('已上传成功');
} else {
$("#picImgInfo").html('未上传成功');
}
hideLoading();
}).catch(e => {
console.error(e);
hideLoading();
});
})
});
$('#vggUploadBtn').on('click', function () {
showLoading();
$.ajaxFileUpload({
url: '/admin/gift/upload',//后台请求地址
type: 'post',//请求方式 当要提交自定义参数时这个参数要设置成post
secureuri: false,//是否启用安全提交默认为false。
fileElementId: 'vggUploadFile',// 需要上传的文件域的ID即<input type="file">的ID。
dataType: 'json',//服务器返回的数据类型。可以为xml,script,json,html。如果不填写jQuery会自动判断。如果json返回的带pre,这里修改为json即可解决。
success: function (json, status) {//提交成功后自动执行的处理函数参数data就是服务器返回的数据。
console.log(json);
if (json.path) {
$('#vggUrl').val(json.path);
$('#vggImage').attr("src", json.path);
if (json.path != '') {
$("#vggImgInfo").html('已上传成功');
} else {
$("#vggImgInfo").html('未上传成功');
}
console.log(json.path);
hideLoading();
} else {
$("#tipMsg").text(json.msg);
$("#tipModal").modal('show');
hideLoading();
}
uploadGift($this.files['vggUploadFile']).then(res => {
let path = res.path;
console.log(path);
$('#vggUrl').val(path);
$('#vggImage').attr("src", path);
if (path != '') {
$("#vggImgInfo").html('已上传成功');
} else {
$("#vggImgInfo").html('未上传成功');
}
});
})
hideLoading();
}).catch(e => {
console.error(e);
hideLoading();
});
});
$('#svgaUploadBtn').on('click', function () {
showLoading();
$.ajaxFileUpload({
url: '/admin/gift/upload',//后台请求地址
type: 'post',//请求方式 当要提交自定义参数时这个参数要设置成post
secureuri: false,//是否启用安全提交默认为false。
fileElementId: 'svgaUploadFile',// 需要上传的文件域的ID即<input type="file">的ID。
dataType: 'json',//服务器返回的数据类型。可以为xml,script,json,html。如果不填写jQuery会自动判断。如果json返回的带pre,这里修改为json即可解决。
success: function (json, status) {//提交成功后自动执行的处理函数参数data就是服务器返回的数据。
console.log(json);
if (json.path) {
$('#luckyGiftSvgaUrl').val(json.path);
if (json.path != '') {
$("#svgaImgInfo").html('已上传成功');
} else {
$("#svgaImgInfo").html('未上传成功');
}
console.log(json.path);
hideLoading();
} else {
$("#tipMsg").text(json.msg);
$("#tipModal").modal('show');
hideLoading();
}
uploadGift($this.files['svgaUploadFile']).then(res => {
let path = res.path;
console.log(path);
$('#luckyGiftSvgaUrl').val(path);
if (path != '') {
$("#svgaImgInfo").html('已上传成功');
} else {
$("#svgaImgInfo").html('未上传成功');
}
});
})
hideLoading();
}).catch(e => {
console.error(e);
hideLoading();
});
});
$('#viewFileUploadBtn').on('click', function () {
showLoading();
$.ajaxFileUpload({
url: '/admin/gift/upload',//后台请求地址
type: 'post',//请求方式 当要提交自定义参数时这个参数要设置成post
secureuri: false,//是否启用安全提交默认为false。
fileElementId: 'viewUploadFile',// 需要上传的文件域的ID即<input type="file">的ID。
dataType: 'json',//服务器返回的数据类型。可以为xml,script,json,html。如果不填写jQuery会自动判断。如果json返回的带pre,这里修改为json即可解决。
success: function (json, status) {//提交成功后自动执行的处理函数参数data就是服务器返回的数据。
console.log(json);
if (json.path) {
$('#viewUrl').val(json.path);
$('#viewFile').attr("src", json.path);
if (json.path != '') {
$("#viewFileInfo").html('已上传成功');
} else {
$("#viewFileInfo").html('未上传成功');
}
console.log(json.path);
hideLoading();
} else {
$("#tipMsg").text(json.msg);
$("#tipModal").modal('show');
hideLoading();
}
uploadGift($this.files['viewUploadFile']).then(res => {
let path = res.path;
console.log(path);
$('#viewUrl').val(path);
$('#viewFile').attr("src", json.path);
if (path != '') {
$("#viewFileInfo").html('已上传成功');
} else {
$("#viewFileInfo").html('未上传成功');
}
hideLoading();
}).catch(e => {
console.error(e);
hideLoading();
});
})
});
$("#cancel").click(function () {
TableHelper.unCheckAll("#table");
@@ -1117,6 +1086,7 @@ export default {
$("#table").on("click", '.opt-edit', function () {
console.log("btnEdit");
var id = $(this).attr("data-id");
$this.files = {};
$.ajax({
type: "get",
url: "/admin/gift/get.action",