Directorio de artículos
- prefacio
- 1. Diagrama de ejemplo
- 2. Proceso de implementación
- 1. Complete la dirección api para enviar imágenes
- 2. Obtén fotos locales
- 3. Cargue la imagen local en el servidor del desarrollador
- Tres , el código de implementación específico
- 4. Identificación inteligente de la tarjeta de identificación
- Resumir
prefacio
La función de cargar imágenes locales es muy común, entonces, ¿cómo implementarla?
1. Diagrama de ejemplo
2. Proceso de implementación
1. Complete la dirección api para enviar imágenes
El envío de imágenes también debe llamar a la interfaz api correspondiente, por lo que nuestra primera tarea es asegurarnos de que la dirección para enviar imágenes esté disponible.
En este punto, puede crear un nuevo archivo api en el directorio raíz del archivo del proyecto y luego crear un nuevo archivo index.js
En el archivo index.js:
// 公共地址 var baseURL = "https://meituan.thexxdd.cn/api"; // 图片上传接口 let IMAGEURL = baseURL + '/upload_picture'; // 将该对象暴露出去给其他文件使用 export { IMAGEURL, AICARD }
direccion publica
// 公共地址 var baseURL = "https://meituan.thexxdd.cn/api";
Definir la dirección para el envío de imágenes.
// 图片上传接口 let IMAGEURL = baseURL + '/upload_picture';Puede ver que esta es una dirección pública y un empalme de cadena de la dirección de la imagen enviada , de modo que se escribe la dirección API para enviar la imagen, pero aún debe enviar los parámetros correspondientes, que es la dirección de la imagen que desea para enviar, entonces, ¿cómo obtener el local ¿Qué pasa con las imágenes? Esto requiere que verifique la documentación de uni-app Hay una API correspondiente en la documentación, que se puede realizar llamándola.
2. Obtén fotos locales
# uni.elegirMedios(OBJETO)
Tome o seleccione una foto o un video del rollo de la cámara de su teléfono.
Dirección del sitio web oficial: uni.chooseVideo(OBJECT) | sitio web oficial de la aplicación uni
OBJETO descripción del parámetro
| nombre del parámetro | tipo | valores predeterminados | requerido | ilustrar |
|---|---|---|---|---|
| contar | Número | 9 (Nota: ios no puede ser mayor que 9) | No | El número máximo de archivos que se pueden seleccionar |
| tipo de medio | Matriz.<cadena> | ['imagen', 'video'] | No | Tipo de archivo |
| tipo de fuente | Matriz.<cadena> | ['álbum', 'cámara'] | No | Fuentes seleccionadas para imágenes y videos |
| maxDuration | Número | 10 | No | El tiempo máximo de grabación de grabación de video, en segundos. El rango de tiempo es entre 3s y 30s |
| tipo de letra | Matriz.<cadena> | ['original', 'comprimido'] | No | Solo es válido cuando mediaType es una imagen, ya sea para comprimir el archivo seleccionado |
| cámara | Cadena | 'atrás' | No | Solo es válido cuando sourceType es cámara, use cámara frontal o trasera |
| éxito | función | No | Función de devolución de llamada para una llamada de interfaz exitosa | |
| fallar | función | No | Función de devolución de llamada para falla de llamada de interfaz | |
| completo | función | No | La función de devolución de llamada del final de la llamada de interfaz (la llamada se ejecutará con éxito o fallará) |
OBJECT.mediaType valor legal
| valor | ilustrar |
|---|---|
| imagen | Solo puede tomar una foto o elegir una foto del álbum de fotos |
| video | Solo puede grabar videos o elegir videos del carrete de la cámara |
| mezcla | Se pueden seleccionar imágenes y videos. |
OBJECT.sourceType valor legal
| valor | ilustrar |
|---|---|
| álbum | seleccionar del álbum |
| cámara | disparar con cámara |
Valor legal de OBJECT.camera
| valor | ilustrar |
|---|---|
| atrás | Usa la cámara trasera |
| frente | Usa la cámara frontal |
descripción del parámetro de retorno de éxito
| nombre del parámetro | tipo | ilustrar |
|---|---|---|
| archivos temporales | Matriz.<cadena> | Lista de archivos temporales locales |
| tipo | Cadena | Tipo de archivo, los valores válidos son imagen, video, mezcla |
La estructura de res.tempFiles
| nombre del parámetro | tipo | ilustrar |
|---|---|---|
| ruta del archivo temporal | Cadena | Ruta del archivo temporal local (ruta local) |
| tamaño | Número | Tamaño de archivo temporal local, unidad B |
| duración | Número | la duración del vídeo |
| altura | Número | altura de vídeo |
| ancho | Número | ancho de vídeo |
| thumbTempFilePath | Cadena | Ruta del archivo temporal de miniaturas de video |
| Tipo de archivo | Cadena | Tipo de archivo |
valor legal de fileType
| valor | ilustrar |
|---|---|
| imagen | imagen |
| video | video |
Ejemplo de uso:
/ 定义一个函数专门用来上传图片
// 参数说明:
// 1.图片上传的地址，
// 2.上传成功的说明
// 3.上传失败的说明
var upLoad = function(imageUrl, suc_desc, err_desc) {
return new Promise((resolve, reject) => {
uni.chooseMedia({
count: 1, //所要上传图片的数量
mediaType: ['image'], //所要上传文件的类型
sourceType: ['album', 'camera'], //所要上传文件的来源
sizeType: ['original', 'compressed'], //所要上传文件是否需要压缩
success(res) {
console.log(res.tempFiles)
}
})
})
}
// 暴露该函数
export {
upLoad
}3. Cargue la imagen local en el servidor del desarrollador
uni.uploadFile(OBJETO)
将本地资源上传到开发者服务器，客户端发起一个
POST请求，其中content-type为multipart/form-data。
如页面通过 uni.chooseImage 等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。
OBJECT 参数说明
| 参数名 | 类型 | 必填 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| url | String | 是 | 开发者服务器 url | |
| files | Array | 是（files和filePath选其一） | 需要上传的文件列表。使用 files 时，filePath 和 name 不生效。 | App、H5（ 2.6.15+） |
| fileType | String | 见平台差异说明 | 文件类型，image/video/audio | 仅支付宝小程序，且必填。 |
| file | File | 否 | 要上传的文件对象。 | 仅H5（2.6.15+）支持 |
| filePath | String | 是（files和filePath选其一） | 要上传文件资源的路径。 | |
| name | String | 是 | 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容 | |
| header | Object | 否 | HTTP 请求 Header, header 中不能设置 Referer。 | |
| timeout | Number | 否 | 超时时间，单位 ms | H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+) |
| formData | Object | 否 | HTTP 请求中其他额外的 form data | |
| success | Function | 否 | 接口调用成功的回调函数 | |
| fail | Function | 否 | 接口调用失败的回调函数 | |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
注意：
- App支持多文件上传，微信小程序只支持单文件上传，传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。
- hello uni-app中的客服反馈，支持多图上传。uni-app插件市场中也有多个封装的组件。
- App平台选择和上传非图像、视频文件，参考uni-app 选择和上传非图像、视频文件 - DCloud问答
- 网络请求的
超时时间可以统一在manifest.json中配置 networkTimeout。 - 支付宝小程序开发工具上传文件返回的http状态码为字符串形式，支付宝小程序真机返回的状态码为数字形式
files参数说明
files 参数是一个 file 对象的数组，file 对象的结构如下：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| name | String | 否 | multipart 提交时，表单的项目名，默认为 file |
| file | File | 否 | 要上传的文件对象，仅H5（2.6.15+）支持 |
| uri | String | 是 | 文件的本地地址 |
Tip:
- 如果
name不填或填的值相同，可能导致服务端读取文件时只能读取到一个文件。
success 返回参数说明
| 参数 | 类型 | 说明 |
|---|---|---|
| data | String | 开发者服务器返回的数据 |
| statusCode | Number | 开发者服务器返回的 HTTP 状态码 |
用法示例：
uni.uploadFile({
url: imageUrl, // 上传图片的接口地址
filePath: tempFilePath, //所要上传的图片地址
name: 'file', //所要上传的文件类型
header: {
accept: 'application/json'
},
success: (uploadFileRes) => { //成功的回调函数
console.log(uploadFileRes);
resolve(uploadFileRes)
}
});三、具体实现代码
以上就是我们所要使用的api的用法讲解，接下来就到了如何利用该方法实现图片的上传啦，接下来我将通过一个案例实现。
步骤1 —— 封装提交图片的地址
关于这一步在文章开头已经描述，在这里不再赘述
api 文件夹下 —— index.js文件
步骤2 —— 封装专门用来提交图片的函数
api 文件夹下 —— misc.js 文件
// 定义一个函数专门用来上传图片
// 参数说明:
// 1.图片上传的地址，
// 2.上传成功的说明
// 3.上传失败的说明
var upLoad = function(imageUrl, suc_desc, err_desc) {
return new Promise((resolve, reject) => {
uni.chooseMedia({
count: 1, //所要上传图片的数量
mediaType: ['image'], //所要上传文件的类型
sourceType: ['album', 'camera'], //所要上传文件的来源
sizeType: ['original', 'compressed'], //所要上传文件是否需要压缩
success(res) {
const tempFilePath = res.tempFiles[0].tempFilePath
uni.uploadFile({
url: imageUrl, // 上传图片的接口地址
filePath: tempFilePath, //所要上传的图片地址
name: 'file', //所要上传的文件类型
header: {
accept: 'application/json'
},
success: (uploadFileRes) => { //成功的回调函数
console.log(uploadFileRes);
resolve(uploadFileRes)
}
});
}
})
})
}
// 暴露该函数
export {
upLoad
}步骤3 —— 在所在的页面文件中引入以上步骤1和步骤2的方法
例如在 index.vue 中，在相应的添加图片点击事件中调用以上的方法即可
// 添加图片的点击事件
async addImage() {
// 调用上传图片的函数并传入参数
const result = await upLoad(IMAGEURL, '上传中', '上传失败');
const image = JSON.parse(result.data).data;
this.baseData.push(image);
},四、身份证的智能识别
Después de aprender los métodos anteriores, la identificación inteligente de las tarjetas de identificación es muy simple. Todavía puede seguir los pasos anteriores, llamar a la interfaz de identificación inteligente correspondiente, llamar a la interfaz API mencionada anteriormente en uni-app y luego asignar el valor de retorno a la tabla correspondiente Un solo elemento es suficiente, ¿lo has aprendido? ¡Ir!