hello，我又要细说uniapp了

附件上传，图片上传，视频上传应该是目前手机比较常见的功能，但是对于上传还是有一些需要注意

上传 - 一般有图片上传，附件视频

图片上传

图片的上传 -  直接动手机或者摄像头

官网地址：

uni-app官网

附件或者视频

官网：

uni-app官网

注意 - 微信小程序和app是不支持这个api的 - 对于微信小程序wx.chooseMessageFile(可以从微信聊天会话中进行选择

关于app的上传附件，可以利用原生进行，这篇文章中有记录uniapp实现常用功能_哆来A梦没有口袋的博客-CSDN博客_uniapp常用功能

选择完之后就是上传，uniapp有自己的上传

上传 

uni-app官网

上传也很好理解，都有案例，如果要上传自己的参数，可以写在formData里面

其实写这篇文章主要不是讲这几个api,而是讲假设要自己上传附件给后端应该怎么做

用post,上传base64给后端

uni.getFileSystemManager() - 获取全局唯一的文件管理器，利用readFile方法进行转码

要注意的是每个小程序有自己的规范

uni-app官网

写个案例

uni.chooseImage({
	count: 1,
	success: (res) => {
		 wx.getFileSystemManager().readFile({
		 filePath: res.tempFilePaths[0],
		 encoding: "base64",
		 success: (result) => {
				this.form[name] = 'data:image/png;base64,' + result.data;
				this[name] = result.data;
				this.$forceUpdate();
					}
				 })
			}
	})

这个base64文件就是你要传给后端的图片了，

关于上传多个图片给后端

1，循环遍历用uniapp自己的upload方法

2. 利用base64， 在一个接口上传多个图片给后端

APP选择附件

 首先了解一下renderjs - uni-app官网

使用这个是因为当时上传附件使用u-view上传附件，结果在h5可以上传附件，但是其实在app端是不支持上传图片的，但是做也没有注意，为了解决这个问题，就写了一个原生input来实现上传附件,

其实uniapp是有上传的api的，但是刚好附件上传api只支持h5，也不支持app,

上传附件组件

<template>
	<view :file="file" :change:file="uploadFile.changeFile" :randomID="randomID" :change:randomID="uploadFile.changeRandomID">
		<view @click="uploadFile.addUpload" hover-class="slot-btn__hover" hover-stay-time="150">
			<view> + </view>
		</view>
		<view id="upload-container" class="input" style="display: none;">
			附件上传
		</view>
	</view>
</template>

<script>
	import {
		Config
	} from '@/utils/config.js'
	import {
		UploadApi
	} from '@/api/upload.js';
	const uploadApi = new UploadApi();
	export default {
		name: 'uploadFile',
		data() {
			return {
				file: '',
				randomID: ''
			}
		},
		methods: {
			async upload(url) {
				console.log('uplaidfIKE')
				this.$emit('uploaded', url)
			}
		}
	}
</script>

<script module="uploadFile" lang="renderjs">
	import {
		UploadApi
	} from '@/api/upload.js';
	const uploadApi = new UploadApi();
	import {
		Config
	} from '@/utils/config.js';
	const config = new Config();
	let prefix = config.getImgPdfUrl();
	var input;
	export default {
		data() {
			return {

			};
		},
		mounted(){
			// 创建附件上传
			input = document.createElement('input'); //创建元素
			input.type = 'file' //添加file类型
			input.onchange = (event) => {
				// this.$ownerInstance.callMethod('submit', editor.txt.html())
				uploadApi.uploadFileByJquery(input.files[0], 2).then(r => {
                    //this.$ownerInstance 获取当前组件的 ComponentDescriptor 实例
					this.$ownerInstance.callMethod('upload', r)
				})
			}
			document.getElementById('upload-container').appendChild(input)
		},
		methods: {
			changeFile(newValue, oldValue, ownerVm, vm) {

			},
			changeRandomID(newValue, oldValue, ownerVm, vm) {
			},
			addUpload() {
				input.click()
			}
		}
	}
</script>

<style lang="scss">
	.slot-btn {
		width: 140rpx;
		height: 140rpx;
		display: flex;
		justify-content: center;
		// align-items: center;
		line-height: 130rpx;
		font-size: 60rpx;
		background: rgb(244, 245, 246);
		border-radius: 10rpx;
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}
</style>

顺便贴一个封装的上传附件的代码

import {
    Config
} from '../utils/config.js'

import $ from '@/js/jquery-3.4.1.min.js'


class UploadApi {
    constructor() {}

    //obj为 u-upload控件 选择的文件返回 - obj.url
    // eg [{"url":"blob:http://localhost:8083/56d15704-2537-46fd-b188-fedfc2b8b35f","progress":0,"error":false,"file":{}}] 
    uploadFile(formData, obj) {
        return new Promise((resolve, reject) => {
            uni.uploadFile({
                url: Config.getInstance().getBaseUrl() + '/api/common/upload.do',
                filePath: obj.url,
                name: 'file',
                formData: formData,
                success: res => {
                    const data = JSON.parse(res.data)
                    // console.log("上传文件返回 data：" + JSON.stringify(data))
                    if (data.code == "9000") {
                        resolve(data.data)
                        // console.log("上传文件返回 成功：" + data.data)
                    } else {
                        reject(data)
                        // console.log("上传文件返回 失败：" + JSON.stringify(data))
                    }
                },
                fail: (e) => {
                    console.log("上传文件fail返回：" + e)
                    reject(e)
                }
            })
        })
    }

    /**
     * @param {File} file 文件对象
      * @param {Integer} fileType 1 图片 2 视频 
      * */
    uploadFileByJquery(file, fileType) {
        return new Promise((resolve, reject) => {
            var formData = new FormData();
            formData.append("file", file); //上传一个files对象
            formData.append("fileType", fileType); //需要上传的多个参数
            $.ajax({
                url: Config.getInstance().getBaseUrl() + '/api/common/upload.do',
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                success: function(res) {
                    resolve(res.data);
                },
                error: function(err) {
                    reject("网络连接失败,稍后重试", err);
                }

            })
        })
    }

    /// 上传多图
    uploadFiles(formData, objs) {
        let num;
        if (objs) {
            num = objs.length;
        }

        return new Promise(async (resolve, reject) => {
            let queue = new Array()
            try {
                for (let i = 0; i < num; i++) {
                    console.log(objs[i], 'sss ,i ');
                    let data = await this.uploadFile(formData, objs[i]);
                    queue.push(data)
                };
                // resolve(queue.join(','))
                resolve(queue)
            } catch (e) {
                reject(e)
            }
        })
    }
}


export {
    UploadApi
}

除了上传，一定还有回显，预览图片和附件，一定要记得地址要正确，不然会显示失败

import {
	Config
} from '@/utils/config.js';
const config = new Config();

export function searchPdf(url) {
	let allUrl = url.replace("\\", "\/");
     if(!url.includes('http')) {
		 allUrl = config.getImgPdfUrl() + allUrl;
	 }
	 console.log("allUrl: ",allUrl);
	if (url.includes('jpeg') || url.includes('jpg') || url.includes('png')) {
		console.log(allUrl, 'ALLImag')
		uni.previewImage({
			urls: [allUrl],
			fail: () => {
				console.log("预览图片失败", JSON.stringify(err))
				uni.showToast({
					title: '预览图片失败',
					icon: 'none'
				});
			},
			success(index, tapIndex) {
				console.log("预览图片成功", index, tapIndex)
			}
		});
		return
	} else {
		uni.showLoading({
			title: '正在打开，请等待'
		});
		uni.downloadFile({
			url: allUrl,
			fail: () => {
				uni.hideLoading()
				uni.showToast({
					title: '预览文件失败',
					icon: 'none'
				});
			},
			success: function(res) {
				console.log(res, 'res')
				var filePath = res.tempFilePath;
				console.log(filePath, 'folefasa',filePath)
				uni.openDocument({
					filePath: filePath,
					success: function(res) {
						console.log("预览文件成功", res)
						uni.hideLoading();
					},
					fail(err) {
						console.log("预览文件失败", err)
						uni.hideLoading();
						uni.showToast({
							title: '预览文件失败',
							icon: 'none'
						});
					}
				});
			},
		})

	}

}

码字不易，点个赞啊！

Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

GaussDB(DWS) SQL性能问题案例集

avatar 华为开发者空间
cover

【案例共创】CodeArts+SKILL 双引擎：AI 驱动 WEB 服务器极速部署

avatar 华为开发者空间
cover

码道智绘：让文字秒变专业图表

avatar 华为开发者空间