Hoy, la compañía agregó una interfaz para cargar imágenes y de repente recordé que no había escrito un artículo por un tiempo, así que hoy escribiré algo de manera informal.
Primero, echemos un vistazo a cómo la documentación oficial del sitio web describe este aspecto:
subir foto
uni.uploadFile(OBJETO)
Para cargar recursos locales al servidor del desarrollador, el cliente inicia una POSTsolicitud, donde content-typeestá multipart/form-data.
(El enlace oficial se adjunta aquí, puede ver en detalle cómo el documento oficial describe el documento oficial de carga de archivos uniapp )
Se puede ver uni.uploadfileque es una postsolicitud y el encabezado de la solicitud debe especificarse content-typeya que multipart/form-data
el código es el siguiente
//图片上传
uni.uploadfile({
url:'接口路径',
filePath:'要上传文件资源的路径。',
name:'multipart 提交时，表单的项目名，默认为 file',
header:{
"Content-Type": "multipart/form-data" //一定要写的
},
formData:{
...data //网络请求中其他额外的data
},
success(res){
console.log(res)
},
fail(err){
console.log(err)
},
complete(){
}
})
//用另一个api来做个对比
uni.request({
url:'',
method:'',
data:{
...data
},
header:{
"Content-Type": "application/json"
},
success(res){
console.log(res)
},
fail(err){
console.log(err)
},
complete(){
}
})
Se puede ver que la información de configuración de estas dos API no es muy diferente y solo se debe prestar atención a los siguientes puntos:
1. Es necesario cambiar el nombre.
2. Los parámetros de solicitud de interfaz normal están en datay los parámetros de carga de imágenes están fromDataen
3. La carga de imágenes también agrega dos parámetros filePathyname
4. El encabezado de solicitud para cargar imágenes debe agregarse content-typecomomultipart/form-data
Por supuesto, cómo obtener el archivo oficial uniapp también tiene la API correspondiente, de la siguiente manera:
Obtener fotos locales
uni.elegirImagen(OBJETO)
Elija una imagen de su álbum de fotos local o tome una foto con su cámara.
uni.chooseImage({
count: 6, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: function (res) {
console.log(JSON.stringify(res.tempFilePaths));
}
});
(El enlace oficial se adjunta aquí. Puede ver en detalle cómo lo describe el documento oficial. Uniapp obtiene el documento oficial de imágenes locales )
La combinación de los dos métodos anteriores puede completar el proceso desde la obtención de imágenes hasta la carga de ellas.
uni.chooseImage({
count: 6, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: function (res) {
uni.uploadfile({
url:'接口路径',
filePath:'要上传文件资源的路径。',
name:'multipart 提交时，表单的项目名，默认为 file',
header:{
"Content-Type": "multipart/form-data" //一定要写的
},
formData:{
...data //网络请求中其他额外的data
},
success(res){
console.log(res)
},
fail(err){
console.log(err)
},
complete(){
}
})
}
})
El uso específico requiere encapsulación, y la encapsulación de solicitudes no se mostrará aquí. Hay muchos métodos, por lo que no lo demostraré.