Bootstrap

uni-app之app上传、下载非媒体文件(xlsx、pdf、docx...)

通过阅读官方文档发现,uni.chooseFile在app端不支持非媒体文件上传;
可以使用这个插件,验证过可以上传excel文件;具体使用可以去看文档

插件地址
就是还是会出现相机,这个可能需要自己解决下
实现功能:只能上传一个文件

template

 <view class='rowFile'>
      <lsj-upload v-if="!conditionListGroup[index].evaluationFileList" ref="lsjUpload" childId="dayUpload" :option="option" :formats="formats" :debug="debug"
            @uploadEnd="onuploadEnd" @progress="onprogre" @change="change($event,'Evaluation',index)" :multiple="false" accept="accept">
            <u-button @click.prevent="hanldUpload" size="mini"
              style="width: 100%;height:70%;font-size: 14px;line-height: 70%;">上传EvaluationList</u-button>
      </lsj-upload>

      <view style="padding-bottom: 10px;" v-if="conditionListGroup[index].evaluationFileList">Evaluation:</view>
        <view class="fileList" v-if="conditionListGroup[index].evaluationFileList">
        <a
                  href="javascript:void(0);"
                  style="text-decoration: none"
                  v-for="item in conditionListGroup[index].evaluationFileList"
                  @click.prevent="fDownloadHandler(item.id,item.fileOriginalName)"
                  >{{ item.fileOriginalName
                  }}
                  <i
                    style="margin-left: 10px;font-size: 16px;"
                    @click.prevent="deteleFile('Evaluation',item.id,index)"
                    >X</i
                  >
                </a>
      </view>

js

上传文件


let  option=ref({
          url: config.url + 'xxx',//服务器地址
          name: 'file',
          header: {
            Authorization: "Bearer " + useUser?.userinfo?.authorization, 
          }}) 

let excelList=ref([])
let twoName=''
let twoIndex=''

// 触发上传
const change=(files,name,index)=>{
  twoName=name
  twoIndex=index
  const fileData = JSON.stringify([...files.values()]);
        if (fileData?.length) {
          const url = JSON.parse(fileData)[0].path;
          const name = JSON.parse(fileData)[0].name;
          // console.log(url, name, "获取文件url");
          //触发上传
          console.log(proxy.$refs.lsjUpload[0], "获取文件url");
          // proxy.$refs.lsjUpload[0].upload();

          if(twoName=='Evaluation'){
            proxy.$refs.lsjUpload[0].upload();

          }else{
            proxy.$refs.lsjUploadC[0].upload();

          }
          // this.btnLoading=true;
        }

}

let files= new Map()
// 上传过程
const onprogre=(item)=>{
  files.set(item.name, item)
  console.log(item,'打印对象', JSON.stringify(files.get(item.name)));
}

// 上传完成
const onuploadEnd=(item)=>{
  console.log(`${item.name}已上传结束,上传状态=${item.type}`);
        if (item['responseText']) {
          console.log('演示服务器返回的字符串JSON转Object对象');
          const responseText = JSON.parse(item.responseText);
          console.log(responseText, "上传成功的数据");
          let val=responseText.data
          if (responseText.code === 200) {
            excelList.value=[responseText.data]
            if(twoName=='Evaluation'){

        conditionListGroup.value[twoIndex].evaluationFileList=[val]
        conditionListGroup.value[twoIndex].comprehensiveValueEvaluationList=val.id
      }else{
        conditionListGroup.value[twoIndex].customFileList=[val]
        conditionListGroup.value[twoIndex].comprehensiveValueCustomList=val.id
      }

            // this.imageValue.push({
            //   name: item.name,
            //   url: responseText.data
            // });
            // this.btnLoading=false;
          } else {
            this.showToastDesc(responseText.msg || "上传失败,请重试")
          }
        };
        };

// 鸡肋
const hanldUpload=(val)=>{
  // console.log(val,',;');
  // 只上传一个
  // if (this.imageValue.length) {
  //         this.showToastDesc("只能上传一个文件");
  //         return;
  //       }
}

下载文件

// 文件下载
const fDownloadHandler=(id,xlsName)=>{
 //注意:url是你要下载的文件路径,  xlsName(变量,随便命名) 是文件的后缀名,用于文件命名和格式修改
 var options = {
    filename: 'file://storage/emulated/0/啥名都行/' + xlsName 
};

let url=config.url + `xxx?fileId=${id}` //服务器地址
let dtask = plus.downloader.createDownload(url,options,function(d, status) {//d为下载的文件对象;status下载状态
		if (status == 200) {//下载成功
      uni.showToast({
			icon: 'none',
			mask: true,
			title: '已保存到文件夹:/啥名都行/' + xlsName, //保存路径

			duration: 3000,
		});
			//d.filename是文件在保存在本地的相对路径,使用下面的API可转为平台绝对路径
			let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
 
			plus.runtime.openFile(d.filename); //选择软件打开文件
		} else {//下载失败
      uni.showToast({
			icon: 'none',
			mask: true,
			title: '下载失败,请稍后重试!', //保存路径

		});
			plus.downloader.clear(); //清除下载任务
		}
	}
);

dtask.setRequestHeader('Authorization', "Bearer " + useUser?.userinfo?.authorization)  //添加请求头
dtask.start();//启用

}

删除文件

// 文件删除
function deteleFile(name,fId,conditionGroupIdx) {
if(name=='Evaluation'){
  conditionListGroup.value[conditionGroupIdx].evaluationFileList=null
  conditionListGroup.value[conditionGroupIdx].comprehensiveValueEvaluationList=null
}else{
  conditionListGroup.value[conditionGroupIdx].customFileList=null
  conditionListGroup.value[conditionGroupIdx].comprehensiveValueCustomList=null
}}

参考

文件上传参考 https://blog.csdn.net/weixin_44202904/article/details/132204909

文件下载参考 https://blog.csdn.net/qq_40745143/article/details/128955853

;