k-ui

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

cUpload用法：

import FILE_API from "@/api/sysFileApi";
import { cUpload } from 'rundle-elementui';

components: { cUpload }

2.template：

<c-upload
    :uploadDataFile="uploadDatas"
    :uploadType="uploadType"
    @getUploadFile="getUploadFile"
    @getRemoveFileId="getRemoveFileId"
    @getDownloadFile="getDownloadFile"
    @handleUploadFile="handleUploadFile"
    @handleUploadFileObject="handleUploadFileObject"
    @handleRemoveFile="handleRemoveFile"
    :uploadMethod="uploadMethod"
    :delete-method="deleteMethod"
    :download-method="downloadMethod"
>
</c-upload>

// 文件上传所需属性
uploadType: 'uploadFile',  // uploadFile , uploadPicture,
uploadDatas: [],
uploadFile: null,
downloadFile: null,
removeFileId: '',

// 获取上传的文件
handleUploadFile(file, fileList) {
console.log('upload', file, fileList);
},

// 获取对象形式文件
handleUploadFileObject(data){
  console.log('uploadObj', data);
},

// 获取删除的文件
handleRemoveFile(file, fileList) {
  console.log('remove', file, fileList);
},

// 获取上传的图片
handleUploadPic(file, fileList) {
  console.log('upload', file, fileList);
},

// 获取删除的图片
handleRemovePic(file, fileList) {
  console.log('remove', file, fileList);
},


/*文件上传，删除，下载必备方法*/

// 获取上传文件
getUploadFile(file) {
this.uploadFile = file;
},


// 获取删除文件
getRemoveFileId(fileId){
this.removeFileId = fileId;
},

// 获取下载文件
getDownloadFile(file){
this.downloadFile = file;
},

// 上传方法
uploadMethod() {
return new Promise((resolve) => {
FILE_API.uploadFile(this.uploadFile).then(res => {
resolve(res);
});
})
},

// 删除方法
deleteMethod() {
return new Promise((resolve) => {
FILE_API.deleteFile(this.removeFileId).then(res => {
resolve(res);
});
})
},

// 下载方法
downloadMethod() {
console.log('downloadFile', this.downloadFile)
FILE_API.downloadFile(this.downloadFile.id, this.downloadFile.name);
}
/*文件上传，删除，下载必备方法*/