uni-app(四)上传图片以及图片预览

最新推荐文章于 2025-03-21 15:33:22 发布

.ლ.

最新推荐文章于 2025-03-21 15:33:22 发布

阅读量590

点赞数 2

分类专栏： uni-app 文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/LovelyLittleCub/article/details/138538394

版权

如何实现图片上传以及图片预览？

图片上传：

绑定click事件，定义updateImg方法

<template>
    <view>
        <view style="border: 2rpx solid transparent;border-radius: 50%;	overflow: hidden;
			margin-left: 20rpx;" @click="updateImg">
		    <image style="display: block; width: 150rpx; height: 150rpx;" :src="avatarUrl" mode=""></image>
		</view>
    </view>
</template>

<script>
import {
    save
} from "@/api/xxxx"
export default {
    data() {
        return {
            avatarUrl: ""
        }
    },
    methods: {
        updateImg() {
    		uni.chooseImage({
				success: chooseImageRes => {
					const filePath = chooseImageRes.tempFilePaths[0];
					uni.uploadFile({
						url: baseUrl + 'upload', // 后端接口URL，baseUrl 是访问接口的地址
						filePath: filePath,
						name: 'file',