cmp_upload.vue 上传图片组件

///

/// 文件上传
///

///
///
[RESTful(UriTemplate = "/upload", Method = RequestMethod.POST, Code = "001")]
public string Upload(JToken jt)
{
AttachmentModel attachment = JSONHelper.Deserialize(jt.ToString());

 if (String.IsNullOrEmpty(attachment.ATTACHMENT_NAME))
     throw new ErrorException("01", "附件名称不能为空!", String.Empty);

 if (object.Equals(null, attachment.ATTACHMENT_CONTENT) || attachment.ATTACHMENT_CONTENT.Count() < 1)
     throw new ErrorException("01", "附件的内容不能为空!", String.Empty);

 var fs = FileFactory.GetFileServer(base.OrgId);
 var filename = System.IO.Path.Combine(attachment.BILL_TYPE, attachment.ATTACHMENT_NAME);
 return fs.Upload(filename, attachment.ATTACHMENT_CONTENT); 

}

///

/// 下载
///

/// FTP路径
/// 业务类型
///
[RESTful(UriTemplate = "/download?path={path}&billType={billType}", Method = RequestMethod.GET, Code = "001")]
public byte[] Download(string path, string billType)
{
var fs = FileFactory.GetFileServer(base.OrgId);
return fs.Download(System.IO.Path.Combine(billType, path));

}

<van-button plain type="primary" size="mini" @click="openAttachPopup(item)">
{{
item.INSPECTION_FILE_LIST.length > 0
? 管理(${item.INSPECTION_FILE_LIST.length})
: '添加'
}}

<van-popup
  v-model="showAttachPopup"
  position="bottom"
  :style="{ height: '60%', width: '100%' }"
>
  <div class="attach-popup-content">
    <van-nav-bar
      title="附件管理"
      left-text="关闭"
      left-arrow
      @click-left="showAttachPopup = false"
    />
    <cmp-upload
      v-if="currentAttachItem && showAttachPopup"
      :insp-item="currentAttachItem"
      :data="fileList(currentAttachItem)"
      :is-upload="true"
      :is-remove="true"
      @uploading="handleAttacUpload"
      @removeing="handleAttachRemove"
    />
  </div>
</van-popup>

import cmpUpload from '@/components/cmp_upload.vue'
export default {
data() {
return {
localTableData: [],
showAttachPopup:false,
currentAttachItem: null, // 当前操作的附件项
};
},
methods:{
openAttachPopup(item) {
this.showAttachPopup = true;
// 使用setTimeout确保DOM更新后再设置currentAttachItem
setTimeout(() => {
this.currentAttachItem = item
// 强制重新渲染组件
this.$nextTick(() => {
this.$forceUpdate()
})
}, 50)
},
// 处h理附件上传完成
handleAttacUpload(file) {
this.fileUpload(file, this.currentAttachItem, this.currentAttachItem)
// this.showAttachPopup = false
},
// 处理附件删除
handleAttachRemove(file) {
this.fileRemove(file, this.currentAttachItem, this.currentAttachItem)
},
// 新增文件处理方法
fileList(inspItem) {
let files = [];
if (inspItem.INSPECTION_FILE_LIST) {
files = _.map(inspItem.INSPECTION_FILE_LIST, (item) => ({
id: item.INSPECT_DETAIL_ID,
path: item.ATTACHMENT_PATH,
name: item.ATTACHMENT_NAME,
content: item.ATTACHMENT_CONTENT || ''
}))
}
return files
},
fileUpload(file, inspItem, callBackItem) {
if (callBackItem) {
let obj = inspItem
// 确保文件列表存在
if (obj) {
obj.INSPECTION_FILE_LIST = obj.INSPECTION_FILE_LIST || []
obj.INSPECTION_FILE_LIST.push({
INSPECT_DETAIL_ID: obj.ID,
ATTACHMENT_PATH: file.path,
ATTACHMENT_NAME: file.file.name,
ATTACHMENT_CONTENT: file.content,
ATTACHMENT_TYPE: file.type
})
}
}
},
fileRemove(file, inspItem, callBackItem) {
if (callBackItem) {
let obj = inspItem;
let index = _.findIndex(obj.INSPECTION_FILE_LIST, (x) => {
return x.ATTACHMENT_PATH === file.path;
})
obj.INSPECTION_FILE_LIST.splice(index, 1)
}
},
}
}