Taro+NutUI+vue3+TypeScript

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: {// 是否压缩(定义实际接口需要传参的参数)isCompress: true,},name: 'files',success(response: { errMsg: any; statusCode: number; data: string }) {// console.log(JSON.parse(response.data))if (JSON.parse(response.data).code == 0) {let data = JSON.parse(response.data).dataconsole.log(data)}if (options.xhrState == response.statusCode) {options.onSuccess?.(response, options);} else {options.onFailure?.(response, options);}},fail(e: any) {options.onFailure?.(e, options);}});options.onStart?.(options);uploadTask.progress((res: { progress: any; totalBytesSent: any; totalBytesExpectedToSend: any }) => {console.log('res:', res)// options.onProgress?.(res, options);// console.log('上传进度', res.progress);// console.log('已经上传的数据长度', res.totalBytesSent);// console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);});
}
const handleDelete = (files) => {}
</script>

Taro+NutUI+vue3+TypeScript - 图片上传相关推荐

vue3开发1：在vue3项目中集成ckeditor5编辑器，自定义图片上传，图片编辑排坑（一）
最近尝试用了vue3进行开发,没想到在使用element-plus框架的时候出现了bug(一个星期后官方修复了),所以我对在项目中集成富文本插件ckeditor5比较忐忑,而且也没有vue3中集成ck ...
TARO小程序canvas签名图片上传服务器
taro小程序实现签名上传,发现介绍的很少,所以整理出来给大家一些帮助.首先canvas画板会生成一个图片.这个图片只是一个路径.不同于自己写的上传接口.将图片data发送给后台.这里我们看不到临时路 ...
antd vue3 图片上传组件扩展，支持多图上传图片拖拽排序等
组件涉及到 vue3.2.vite.Ant Design Vue 3.2.16.Windi CSS样式库.vuedraggable-es拖拽库等组件功能图片拖拽多图上传自定义图片加载样式自定 ...
vue3中使用vue-quill富文本编辑器重写图片上传功能
最近开发的一个vue3+element-plus的项目,需要用到富文本编辑器,最终选择了VueQuill这一款轻便型的富文本编辑器. 说说遇到的问题:富文本编辑器的图片上传,默认是直接以base64图 ...
vue2或者vue3图片上传功能（upload）
采用element ui中upload组件上传,目前支持上传单张图片,如果多张可进行更改. 一.页面上组件使用注意:①如果是多张图片,file-list会用到.②name是申明上传文件的格式,可以和 ...
vue-quill-editor之图片上传、大小缩放及内容粘贴、长度限制
**摘要:**该富文本编辑器基于 vue-quill-editor进行的二次扩展,实现功能为: 富文本框图片上传功能拦截,上传到ali-oss. 截屏之后,ctrl+c+v复制粘贴到富文本框文字输入 ...
uve 使用百度ueditor自定义图片上传,在线图片插入,在线图片管理
前言本帖所有内容均用于学习使用,如有涉及侵权,请看到后联系我进行删帖上图片环境 "axios": "^0.21.1", "element-ui& ...
html显示数据库图片django,django将图片上传数据库后在前端显式的方法
1.使用ImageField先安装pillow模块 pip install pillow 2.在app的models中设置 class Image(models.Model): pic_name=mo ...
yii2框架原生的结合框架使用的图片上传
首先我们要从model层开始写起,主要是为了创建验证规则,还有图片上传的路径以及图片的命名规则(UploadForm.php) 接下来我们要在控制器层写好业务逻辑,就是什么情况下直接在调用model层 ...

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

Taro+NutUI+vue3+TypeScript - 图片上传相关推荐

最新文章

热门文章