Taro+NutUI+vue3+TypeScript - 图片上传

啦啦朵朵

已于 2022-12-08 18:18:55 修改

阅读量1.6k

点赞数

文章标签： typescript taro vue

于 2022-12-08 18:06:42 首次发布

本文链接：https://blog.csdn.net/qq_34111842/article/details/128241433

版权

本文介绍了如何结合Taro、Vue3框架和TypeScript语言，实现移动应用中从手机相册选择并上传图片的功能。

摘要由CSDN通过智能技术生成

Taro+Vue3+TypeScript实现手机相册图片上传功能

<template>
    <view>
        <nut-uploader
            :url="uploadUrl" 
            :delete-icon="iconDelete" 
            :before-xhr-upload="beforeXhrUpload" 
            @delete="handleDelete">
        </nut-uploader>
    </view>
</template>
<script setup lang='ts'>
const iconDelete = require('@/assets/icons/delete_icon.png')
const uploadUrl = 'https://xxxx/file/uploadImgs';
const beforeXhrUpload = (taroUploadFile: any, options: any) => {
    const uploadTask = taroUploadFile({
        url: options.url,
        filePath: options.taroFilePath,
        fileType: options.fileType,
        header: {
            'Content-Type': 'multipart/form-data',
            ...options.headers,
        }, 
        // 在这个地方声明接口传参内容
        formData: {
            // 是否压缩(定义实际接口需