moliparty/peko-admin-web
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改上传代码

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

5
src/api/common/upload.js
View File

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

178
src/views/users/GiftManageView.vue
View File

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