优化图片上传新增加可以上传多张图
This commit is contained in:
不做码农
parent
e6c6207343
commit
6f11bae15c
@ -99,23 +99,28 @@ namespace ZR.Admin.WebApi.Controllers
|
||||
}
|
||||
|
||||
string accessPath = $"{OptionsSetting.Upload.UploadUrl}/{FileUtil.GetdirPath("uploads").Replace("\\", " /")}{fileName}";
|
||||
return ToResponse(ResultCode.SUCCESS, accessPath);
|
||||
return ToResponse(ResultCode.SUCCESS, new
|
||||
{
|
||||
url = accessPath,
|
||||
fileName
|
||||
});
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 存储文件到阿里云
|
||||
/// </summary>
|
||||
/// <param name="formFile"></param>
|
||||
/// <param name="fileDir">上传文件夹路径</param>
|
||||
/// <returns></returns>
|
||||
[HttpPost]
|
||||
[Verify]
|
||||
[ActionPermissionFilter(Permission = "system")]
|
||||
public IActionResult UploadFileAliyun([FromForm(Name = "file")] IFormFile formFile)
|
||||
public IActionResult UploadFileAliyun([FromForm(Name = "file")] IFormFile formFile, string fileDir = "")
|
||||
{
|
||||
if (formFile == null) throw new CustomException(ResultCode.PARAM_ERROR, "上传文件不能为空");
|
||||
string fileExt = Path.GetExtension(formFile.FileName);
|
||||
string[] AllowedFileExtensions = new string[] { ".jpg", ".gif", ".png", ".jpeg", ".webp", ".svga", ".xls" };
|
||||
int MaxContentLength = 1024 * 1024 * 4;
|
||||
int MaxContentLength = 1024 * 1024 * 5;
|
||||
|
||||
if (!AllowedFileExtensions.Contains(fileExt))
|
||||
{
|
||||
@ -126,9 +131,13 @@ namespace ZR.Admin.WebApi.Controllers
|
||||
{
|
||||
return ToResponse(ResultCode.CUSTOM_ERROR, "上传文件过大，不能超过 " + (MaxContentLength / 1024).ToString() + " MB");
|
||||
}
|
||||
(bool, string) result = SysFileService.SaveFile("", formFile);
|
||||
(bool, string, string) result = SysFileService.SaveFile(fileDir, formFile);
|
||||
|
||||
return ToResponse(ResultCode.SUCCESS, result.Item2);
|
||||
return ToResponse(ResultCode.SUCCESS, new
|
||||
{
|
||||
url = result.Item2,
|
||||
fileName = result.Item3
|
||||
});
|
||||
}
|
||||
#endregion
|
||||
}
|
||||
|
||||
@ -59,7 +59,7 @@ export function del${genTable.BusinessName}(pid) {
|
||||
}
|
||||
|
||||
// 导出${genTable.functionName}
|
||||
export function export${replaceDto.ModelTypeName}(query) {
|
||||
export function export${genTable.BusinessName}(query) {
|
||||
return request({
|
||||
url: '${genTable.ModuleName}/${replaceDto.ModelTypeName}/export',
|
||||
method: 'get',
|
||||
|
||||
@ -5,7 +5,13 @@ namespace ZR.Service.System.IService
|
||||
{
|
||||
public interface ISysFileService
|
||||
{
|
||||
(bool, string) SaveFile(string picdir, IFormFile formFile);
|
||||
/// <summary>
|
||||
/// 上传文件
|
||||
/// </summary>
|
||||
/// <param name="picdir"></param>
|
||||
/// <param name="formFile"></param>
|
||||
/// <returns>结果、地址、文件名</returns>
|
||||
(bool, string, string) SaveFile(string picdir, IFormFile formFile);
|
||||
|
||||
/// <summary>
|
||||
/// 按时间来创建文件夹
|
||||
|
||||
@ -25,7 +25,7 @@ namespace ZR.Service.System
|
||||
/// <param name="picdir"></param>
|
||||
/// <param name="formFile"></param>
|
||||
/// <returns></returns>
|
||||
public (bool, string) SaveFile(string picdir, IFormFile formFile)
|
||||
public (bool, string, string) SaveFile(string picdir, IFormFile formFile)
|
||||
{
|
||||
// eg: idcard/2020/08/18
|
||||
string dir = GetdirPath(picdir.ToString());
|
||||
@ -36,11 +36,7 @@ namespace ZR.Service.System
|
||||
|
||||
HttpStatusCode statusCode = AliyunOssHelper.PutObjectFromFile(formFile.OpenReadStream(), Path.Combine(dir, fileName));
|
||||
|
||||
if (statusCode == HttpStatusCode.OK)
|
||||
{
|
||||
return (true, webUrl);
|
||||
}
|
||||
return (false, "");
|
||||
return (statusCode == HttpStatusCode.OK, webUrl, fileName);
|
||||
}
|
||||
|
||||
public string GetdirPath(string path = "")
|
||||
|
||||
@ -1,10 +1,21 @@
|
||||
<template>
|
||||
<div class="component-upload-image">
|
||||
<el-upload :action="uploadImgUrl" :on-success="handleUploadSuccess" :before-upload="handleBeforeUpload" :on-error="handleUploadError" name="file"
|
||||
:show-file-list="false" :headers="headers" style="display: inline-block; vertical-align: top">
|
||||
<el-image v-if="imageUrl" :src="imageUrl" class="icon" />
|
||||
<i v-else class="el-icon-plus uploader-icon"></i>
|
||||
<el-upload list-type="picture-card" :action="uploadImgUrl" :on-success="handleUploadSuccess" :before-upload="handleBeforeUpload"
|
||||
:on-exceed="handleExceed" :on-remove="handleRemove" :on-error="handleUploadError" name="file" :show-file-list="true" :limit="limit"
|
||||
:file-list="fileList" :on-preview="handlePictureCardPreview" :class="{hide: this.fileList.length >= this.limit}" :headers="headers">
|
||||
<i class="el-icon-plus"></i>
|
||||
|
||||
<!-- 上传提示 -->
|
||||
<div class="el-upload__tip" slot="tip" v-if="showTip">
|
||||
请上传
|
||||
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
|
||||
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
|
||||
的文件
|
||||
</div>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
|
||||
<img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -14,6 +25,11 @@ import { getToken } from "@/utils/auth";
|
||||
export default {
|
||||
props: {
|
||||
value: [String],
|
||||
// 图片数量限制
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
column: [String],
|
||||
// 上传地址
|
||||
uploadUrl: {
|
||||
@ -32,14 +48,23 @@ export default {
|
||||
},
|
||||
//显示手动输入地址
|
||||
showInput: false,
|
||||
// 是否显示提示
|
||||
isShowTip: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: "",
|
||||
dialogVisible: false,
|
||||
hideUpload: false,
|
||||
uploadImgUrl: process.env.VUE_APP_BASE_API + this.uploadUrl, // 上传的图片服务器地址
|
||||
headers: {
|
||||
Authorization: "Bearer " + getToken(),
|
||||
},
|
||||
imageUrl: "",
|
||||
fileList: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@ -49,22 +74,49 @@ export default {
|
||||
deep: true,
|
||||
handler: function (val) {
|
||||
if (val) {
|
||||
this.imageUrl = val;
|
||||
// 首先将值转为数组
|
||||
const list = Array.isArray(val) ? val : this.value.split(",");
|
||||
// 然后将数组转为对象数组
|
||||
this.fileList = list.map((item) => {
|
||||
if (typeof item === "string") {
|
||||
// if (item.indexOf(this.baseUrl) === -1) {
|
||||
// item = { name: this.baseUrl + item, url: this.baseUrl + item };
|
||||
// } else {
|
||||
item = { name: item, url: item };
|
||||
// }
|
||||
}
|
||||
return item;
|
||||
});
|
||||
} else {
|
||||
this.imageUrl = "";
|
||||
this.fileList = [];
|
||||
return [];
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
// 是否显示提示
|
||||
showTip() {
|
||||
return this.isShowTip && (this.fileType || this.fileSize);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 删除图片
|
||||
handleRemove(file, fileList) {
|
||||
const findex = this.fileList.map((f) => f.name).indexOf(file.name);
|
||||
if (findex > -1) {
|
||||
this.fileList.splice(findex, 1);
|
||||
this.$emit("input", this.column, this.listToString(this.fileList));
|
||||
}
|
||||
},
|
||||
//上传成功回调
|
||||
handleUploadSuccess(res) {
|
||||
this.$emit(`input`, res, this.column);
|
||||
this.imageUrl = res.data;
|
||||
this.fileList.push({ name: res.data.fileName, url: res.data.url });
|
||||
this.$emit(`input`, this.column, this.listToString(this.fileList));
|
||||
this.loading.close();
|
||||
},
|
||||
// 上传前loading加载
|
||||
handleBeforeUpload(file) {
|
||||
console.log(file);
|
||||
let isImg = false;
|
||||
if (this.fileType.length) {
|
||||
let fileExtension = "";
|
||||
@ -99,6 +151,24 @@ export default {
|
||||
background: "rgba(0, 0, 0, 0.7)",
|
||||
});
|
||||
},
|
||||
// 文件个数超出
|
||||
handleExceed() {
|
||||
this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
|
||||
},
|
||||
// 预览
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
// 对象转成指定字符串分隔
|
||||
listToString(list, separator) {
|
||||
let strs = "";
|
||||
separator = separator || ",";
|
||||
for (let i in list) {
|
||||
strs += list[i].url.replace(this.baseUrl, "") + separator;
|
||||
}
|
||||
return strs != '' ? strs.substr(0, strs.length - 1) : '';
|
||||
},
|
||||
handleUploadError() {
|
||||
this.$message({
|
||||
type: "error",
|
||||
@ -111,8 +181,18 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
::v-deep.hide .el-upload--picture-card {
|
||||
display: none;
|
||||
}
|
||||
// 去掉动画效果
|
||||
::v-deep .el-list-enter-active,
|
||||
::v-deep .el-list-leave-active {
|
||||
transition: all 0s;
|
||||
}
|
||||
|
||||
::v-deep .el-list-enter,
|
||||
.el-list-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateY(0);
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tabs v-model="activeName" tab-position="top">
|
||||
<el-tab-pane label="基本信息" name="basic">
|
||||
<basic-info-form ref="basicInfo" :info="info" />
|
||||
</el-tab-pane>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user