序文
-
最近ユニアプリを使ってH5モバイル端末を書いているのですが、携帯電話から写真を撮って、アルバムから写真を選んでドキュメントサーバーにアップロードする機能があります。
-
写真のアップロード、uni-file-picker ファイルのアップロード、uni.chooseImage、uni.uni.uploadFile については、uni-app を確認してください。
-
PC側の原理と同様で、両方ともファイルオブジェクトによってアップロードされ、PC側は新しいファイルオブジェクトを使用し、uni-appが直接提供します
自分で理解する
1. uni.chooseImage は、電話を呼び出して写真を撮り、アルバムから写真を選択するために uni-app が提供する API です。
2. uni-file-picker ファイルアップロードは、アップロードされた写真とファイルをカプセル化する uni-app のコンポーネントであり、uni.chooseImage API が含まれています
3. uni.uploadFile() は uni-app です。元の uni.request の欠陥を補うために、ファイル サーバーのアドレスを直接書き込むことができます。
4. uni-file-picker ファイルアップロードのデフォルトでは、アップロードスペース uniCloud があるため、アップロード属性は属性に設定されません。
5. アップロードスペースとは何かというと、uni-appはプロジェクト作成時に選択することができますが、アップロードスペースはなく、uni.uploadFile()を使ってドキュメントサーバーをアップロードします。
5. 最後に、uni-file-picker ファイルアップロード (uni.chooseImage を含む) + uni.uploadFile() を使用してこの機能を実現できます。
注意点
1. uni-app プロジェクトにアップロード容量がない場合、uni-file-picker ファイルアップロードのイベントはトリガーされません
2. uni.chooseImage-apiの戻り値
ドキュメントには、tempFiles は File オブジェクトであると記載されています。この中の 0 項目をパラメータとして直接使用すると、エラーが報告される可能性があります。正しいものは次のとおりです。
const tempFilePaths = e.tempFiles[0].file;
3. uni.uploadFile() がリクエストを送信すると、
3.1 axios と同様に、データ層を外側にラップするのに役立ちます。値をフェッチするときに追加のデータ (res.data.data) を書き込む必要があります。
3.1 返される結果はjson形式の文字列なのでjsオブジェクトに変換する必要がある、変換されていない場合は値が灰色になり取得できない
4. uni-file-picker ファイルをアップロードするときは、エコースルー時に 3 つの値が必要であることに注意する必要があります: value="fileLists"
5. ドキュメントや多くのドキュメントには、アップロード スペースがない場合は手動アップロードが必要であると記載されていますが、実際には、手動アップロードを使用するための特別なボタンを作成する必要はありません。
5.1 手動アップロードは写真を取得するのと同じで、ボタンをクリックしてもアップロードには実質的な効果がないため、手動アップロードを記述する必要はありません
5.2 アップロードスペースをバインドしない場合でも、画像を手動でアップロードして直接選択する必要はありません。@select="select" がトリガーされ、uni.uploadFile() でアップロードされます。
6. レンダリング
コードが重要
1. form -uni-forms の形式で、アップロードコンポーネントコード -uni-forms を書き込みます。
タイトルを書かないと正しい0/9アップロード画像制限が表示されません
<uni-forms-item label="">
<uni-file-picker limit="9" :value="fileLists" title="维修单据" :image-styles="imageStyles"
:sourceType="sourceType" @select="select" @progress="progress" @success="success"
@fail="fail" @delete="deletea" />
</uni-forms-item>2. データ内の変数
// 图片回显
fileLists: [],
// 上传图片的样式
imageStyles: {
width: 90,
height: 90,
},
// uni.chooseImage值，从相册选择，拍摄
sourceType: ['album', 'camera'],3.メソッドイベント
// 获取上传状态
select(e) {
console.log('选择文件：', e)
// 解决file对象取值问题
const tempFilePaths = e.tempFiles[0].file;
uni.uploadFile({
url: '文档服务器地址',
// 要上传文件对象
file: tempFilePaths,
文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
name: 'file',
// 请求头设置
// 我们是需要token和用户id登录时存从uni-app数据存储中取
header: {
"token": uni.getStorageSync('token'),
"tenant-id": uni.getStorageSync('tenant-id')
},
// 成功函数
success: (res) => {
// uni.uploadFile默认在外面包了一层data
console.log('上传成功', res.data);
// uni.uploadFile返回来的结果默认是JSON格式字符串，需要用JSON.parse转换成js对象
console.log('上传数据转换',JSON.parse(res.data));
// 取到文档服务器的值
let uploaddata = JSON.parse(res.data)
let x = {}
// 下面3个值是uni-app规定的一个不能少
x.url = uploaddata.url
x.extname = ''
x.name = uploaddata.filename
this.fileLists.push(x)
},
// 失败提示用户重新上传
fail: error => {
console.log('失败', error);
}
})
},
// 获取上传进度
progress(e) {
// 没有上传空间，不会执行
console.log('上传进度：', e)
},
// 上传成功
success(e) {
// 没有上传空间，不会执行
console.log('上传成功')
},
// 上传失败
fail(e) {
// 没有上传空间，不会执行
console.log('上传失败：', e)
},
// 删除
deletea(e) {
console.log('删除图片', e);
},要約: これは試みられ、成功しました。ステップごとにコピーするだけではありません。何か問題が発生した場合は、ステップごとに確認してください。心配しないでください。誤解しないでください。
このプロセスの後、アルバムから撮影してファイルサーバーにアップロードする画像を選択するための uni-app uni-file-picker ファイルアップロードについての予備的な印象も得られたと思いますが、実際に遭遇した状況は次のとおりです。開発は異なっていなければなりませんが、同じであるため、その原理を理解する必要があり、それは同じままです。さあ、労働者を殴ってください！
不備があればご指摘ください、ありがとうございます -- Fengguowuhen