循序渐进VUE+Element 前端应用开发(23）--- 基于ABP实现前后端的附件上传，图片或者附件展示管理

/// <summary>
    /// 上传附件信息，应用层服务接口实现
    /// </summary>
    [AbpAuthorize]
    public class FileUploadAppService : MyAsyncServiceBase<FileUpload, FileUploadDto, string, FileUploadPagedDto, CreateFileUploadDto, FileUploadDto>, IFileUploadAppService
    {
        private AppConfig config = new AppConfig();
        private readonly IRepository<FileUpload, string> _repository;//业务对象仓储对象
        private readonly IRepository<User, long> _userRepository;//用户信息仓储对象
        private IHttpContextAccessor _httpContext;//上下文对象
        public FileUploadAppService(IRepository<FileUpload, string> repository, IRepository<User, long> userRepository, IHttpContextAccessor httpContext) : base(repository)
        {
            _repository = repository;
            _userRepository = userRepository;
            _httpContext = httpContext;
        }

<el-form-item label="封面图片">
              <el-upload
                ref="upload"
                action="/abp/services/app/FileUpload/PostUpload"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="onSuccess"
                :on-error="onError"
                accept="image/jpeg,image/gif,image/png,image/bmp"
                :headers="myHeaders"
                :file-list="editForm.fileList"
              >
                <i class="el-icon-plus" />
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </el-form-item>

dream2023/vue-ele-upload-image
dream2023/vue-ele-upload-file

<el-row>
  <el-col :span="24">
    <el-form-item label="图片" prop="picture">
      <ele-upload-image
        v-model="editForm.picture"
        :is-show-tip="false"
        :size="100"
        action="/abp/services/app/FileUpload/PostUpload"
        title="封面图片"
        :headers="myHeaders"
        :data="{guid:editForm.id, folder:'用户图片'}"
        :crop="true"
      />
    </el-form-item>
  </el-col>
  <el-col :span="24">
    <el-form-item label="资料文档" prop="attachGUID">
      <ele-upload-file
        v-model="editForm.attachGUID_files"
        :response-fn="handleAttachResponse"
        action="/abp/services/app/FileUpload/PostUpload"
        :headers="myHeaders"
        :data="{guid:editForm.attachGUID, folder:'用户图片'}"
        :before-remove="beforeRemoveAttach"
      />
    </el-form-item>
  </el-col>

// 获取附件文件列表
param = { guid: this.editForm.attachGUID }
fileupload.GetByAttachGUID(param).then(data => {
  if (data.result) {
    this.editForm.attachGUID_files = [...data.result]
  }
})

myHeaders: { Authorization: 'Bearer ' + getToken() }, // 用于上传文件的身份认证

beforeRemoveAttach(file, fileList) { // 移除附件图片
      // 服务端删除文件
      var param = { guid: this.editForm.attachGUID, index: fileList.indexOf(file) }
      fileupload.RemoveAttach(param).then(data => {
        console.log(data.result)
      })
    },