まず、アプレットで PDF やその他のファイルを開く方法はいくつかあります。
- WeChat に付属の wx.downloadFile() + wx.openDocument() を使用します。
- Web ビューを使用すると、Uni-App の Web ビューで PDF ファイルを直接読み込むことができます
- これを実現するには、インターネット上で言及されている pdf.js を使用できます (私は使用したことがないので、紹介しません)
インターネット上で見つかった多くの情報によると、Android は上記の最初の方法で開くことができますが、iOS は最初の方法では開くことができません。これはインターネットやコミュニティでも当てはまりますが、バグは修正されているようです. テスト後、Android と iOS の両方で利用できるようになりました。
このようなバグが発生した場合は、Android では方法 1 を使用し、Apple では Web ビューを使用してファイルを開くことができます。
uni-ui アップロード コンポーネントを使用してファイルをアップロードします。
ここで言及するバグは、このコンポーネントが v-model を設定してファイルをアップロードした後、論理的には読み取られた v-model の値が以前にアップロードされたファイル データであるはずですが、印刷後にはデータがなく、印刷後にのみデータが存在することです。クリックしてファイルを削除すると、v-model はそれを読み取った後の値を持ちます。このバグはずっと前にコミュニティで提起されていたため、select イベントをリッスンしてファイル データを手動で保存し、その後、削除イベントに応じて配列内の対応するデータ ファイル データ。次に、私のプロジェクトではファイル名をクリックしてプレビューする必要があるため、ファイル表示は手書きですが、display: none を使用してコンポーネントの元のファイル表示を非表示にしました。
<view style="width: 70%;margin: 0 auto;margin-bottom: 20rpx;">
<uni-file-picker v-model="fileList" title="最多选择9个文件" :list-styles="styleObject" :sourceType="['album', 'camera']"
file-mediatype="all" ref="files" :limit="11" :auto-upload="false" @select="select" @success="success"
@fail="fail" @progress="progress" @delete="deleteFile">
<view class="clickBtn">点击选择文件</view>
</uni-file-picker>
</view>
<view style="width: 70%;margin: 0 auto;margin-bottom: 20rpx;" v-for="(item, index) in ajaxFileList" :key="index">
<view class="flex justify-start align-center">
<view class="fileBox" @click="Preview(item)">{
{ item.name }}</view>
<view class="delBox" @click="delFile(index)">删除</view>
</view>
</view> // 获取上传状态
select(e) {
console.log('选择文件：', e)
e.tempFiles.forEach(item => {
this.ajaxFileList.push({//用一个变量单独存储上传的文件数据
name: item.cloudPath,
extname: item.extname,
url: item.path,
})
});
console.log(this.ajaxFileList);
},
deleteFile(e) {
console.log('删除文件：', e)
this.ajaxFileList.forEach((item, index) => {
if (e.tempFilePath === item.path) {
this.ajaxFileList.splice(index, 1)
}
})
console.log(this.ajaxFileList);
},
// 上传成功
success(e) {
console.log('上传成功')
},
// 上传失败
fail(e) {
console.log('上传失败：', e)
},
// 获取上传进度
progress(e) {
console.log('上传进度：', e)
},
Preview(item) {//用正则去识别不同文件类型，然后对应不同文件类型去做不同操作
console.log(item);
// 定义图片类型的正则表达式
const imageRegex = /(\.jpg|\.jpeg|\.png)$/i;
// 定义文档类型的正则表达式
const docRegex = /(\.doc|\.docx|\.pdf)$/i;
// 定义其他文件类型的正则表达式
const othersRegex = /(\.txt|\.csv|\.xlsx)$/i;
// 利用正则表达式判断文件类型
if (imageRegex.test(item.name)) {
console.log("图片类型");
this.lookImage(item.url)
} else if (docRegex.test(item.name)) {
console.log("文档类型");
this.lookFile(item.url)
} else if (othersRegex.test(item.name)) {
console.log("其他文件类型");
} else {
uni.showToast({
title: `未知文件类型`,
icon: 'none',
duration: 2000
})
}
},
delFile(index) {
console.log(index);
this.ajaxFileList.splice(index, 1)
},
lookImage(url) {
let imgArray = [];
imgArray[0] = url
uni.previewImage({
current: 0,
urls: imgArray
})
},
lookFile(url) {
uni.openDocument({
filePath: url,
success: function (res) {
console.log("打开文档成功");
},
fail: function (res) {
console.log("uni.openDocument,fail");
console.log(res)
},
complete: function (res) {
console.log("uni.openDocument,complete");
console.log(res)
}
});
},ファイルが https または http オンライン リソースの場合:
uni.downloadFile({
url: url,
success: function (res) {
var filePath = res.tempFilePath;
console.log("下载文件：",res);
uni.openDocument({
filePath: filePath,
success: function (res) {
console.log("打开文档成功");
},
fail: function (res) {
console.log("uni.openDocument,fail");
console.log(res)
},
complete: function (res) {
console.log("uni.openDocument,complete");
console.log(res)
}
});
},
fail: function (res) {
console.log('uni.downloadFile,fail')
console.log(res)
},
complete: function (res) {
console.log('uni.downloadFile,complete')
console.log(res)
}},
);今回私が遭遇した要件は、単一の画像をプレビューするときとファイルをアップロードするときにファイルのプレビューをサポートすることでした。
Android では uni.openDocument を開くことができるが、iOS では開くことができない状況がある場合は、次の記事をお読みください。
https://blog.csdn.net/weixin_38673922/article/details/128626373