如何免费自学网站建设,wordpress团购模板,西安有哪些做网站建设的公司好,asp 网站发布器用uniapp3.0的写法组合式api#xff0c;setup形式封装一个图片上传公用组件#xff0c;要求
1、使用uni-file-picker选择文件
2、uni.uploadFile上传图片
3、要能支持上传接口动态化
4、支持删除如片列表中已上传项
5、可以预览已上传列表图片
6、支持动态化限制图片格…用uniapp3.0的写法组合式apisetup形式封装一个图片上传公用组件要求
1、使用uni-file-picker选择文件
2、uni.uploadFile上传图片
3、要能支持上传接口动态化
4、支持删除如片列表中已上传项
5、可以预览已上传列表图片
6、支持动态化限制图片格式图片大小
7、上传成功后走公用组件返回图片列表list
具体的封装代码和在页面使用该组件的例子
组件ImageUploader.vue
templateview classimage-uploaderview classheadertext图片上传/texttext{{ uploadedFiles.length }}/{{ maxCount }}/text/viewuni-file-picker multiple :limitmaxCount :disableuploadedFiles.length maxCount selectonFileChange:ext-classfilePickerClass :file-extnameallowedFormats deleteremoveImageview classupload-btnuni-icons typecamera-filled color#007aff size40/uni-icons/view/uni-file-picker/view
/templatescript setuplet base import.meta.env.VITE_APP_BASE_APIlet token uni.getStorageSync(ACCESS_TOKEN)const props defineProps({maxCount: {type: Number,default: 1},uploadUrl: {type: String,default: /ap/files/upload555//自己的上传地址},allowedFormats: {type: Array,default: () [jpg, jpeg, png, gif]},maxSize: {type: Number,default: 5 * 1024 * 1024 // 5MB},value: {type: Array,default: () {return [];},},})const emit defineEmits([update:list])const uploadedFiles computed({get: () {return props.value;},set: (val) {emit(update:value, val);},});const onFileChange async (files) {console.log(files, files)// const files event.detail.tempFilesconst filelist files.tempFiles; // 获取选中的文件for (const file of filelist) {if (!props.allowedFormats.includes(file.name.split(.).pop().toLowerCase())) {uni.showToast({title: 不支持的文件格式,icon: none})continue}if (file.size props.maxSize) {uni.showToast({title: 文件大小超出限制,icon: none})continue}console.log(hsjhj)uni.uploadFile({url: base props.uploadUrl,filePath: file.path,name: file, // 这里根据API的要求来定义header: {// Content-Type: multipart/form-data, // 设置上传文件的 Content-TypeAuthorization: Bearer ${token}, // 自定义头部信息比如 AuthorizationTenant-Id: 1,CLIENT-TOC: Y},success: (uploadFileRes) {console.log(upload success:, uploadFileRes);let data JSON.parse(uploadFileRes.data)console.log(upload success: data, data);if (data data.code 0) {uploadedFiles.value.push({url: data.data.url})console.log(uploadedFiles.value, uploadedFiles.value.length);emit(update:list, uploadedFiles.value)} else {tip.error(上传失败)}},fail: (error) {console.error(upload fail:, error);tip.error(上传失败)// 处理上传失败的逻辑}});}}const previewImage (url) {uni.previewImage({urls: uploadedFiles.value.map(file file.url),current: url})}const removeImage (file) {console.log(hhj, file)uploadedFiles.value.splice(file.index, 1)emit(update:list, uploadedFiles.value)}const filePickerClass {file-picker: true,disabled: uploadedFiles.value.length props.maxCount}
/scriptstyle scoped.image-uploader {padding: 16px;background-color: #fff;border-radius: 8px;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);}.header {display: flex;justify-content: space-between;margin-bottom: 8px;}.upload-btn {display: flex;align-items: center;justify-content: center;width: 80px;height: 80px;border: 2px dashed #ddd;border-radius: 8px;color: #bbb;}
/style页面使用,预留了上传成功后的回调方法可不传也可以直接v-model绑定 imageUploader :max-count4 update:listupdateImageList v-model:valueimageList/const imageList ref([])const updateImageList (list) {console.log(imageList444,imageList)// imageList.value list //可以赋值也可以做其他操作}
