技术标签: uniapp 前端 javascript uni-app
话不多说直接上代码,具体流程在代码中解释
<template>
<view class="">
<!-- 新增任务表单内容 -->
<view style="width:100vw; height:100vh;padding: 5px 0px;">
<!-- 注意,如果需要兼容微信小程序,最好通过setRules方法设置rules规则 --
<uni-forms label-width="80" ref="baseForm">
<!-- 上传图片 -->
<view style="background-color: #FFFFFF;padding: 0rpx 20rpx;">
<uni-forms-item label="上传图片:">
<u-upload :fileList="fileList1" @afterRead="afterRead"
@delete="deletePic"
name="1" multiple
:maxCount="10"
:previewFullImage="true"></u-upload>
</uni-forms-item>
</view>
<!-- 上传图片 -->
<view class="" style="display: flex;">
<u-button style="width: 90%;margin-top: 15rpx;" type="primary"
text="提交"
@click="addRenWu"></u-button>
</view>
</uni-forms>
</view>
</template>
<script>
import config from '@/config.js';
export default {
data() {
return {
fileList1: []
},
};
},
methods: {
// 删除图片
deletePic(event) {
//这个是uview自带的删除图片缓存路径的
this[`fileList${
event.name}`].splice(event.index, 1);
//这个是自己删除服务器图片的接口--
delPic(event.file.ossId).then(res => {
// console.log(res, 'sanchu');
});
},
// 新增图片
async afterRead(event) {
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file);
let fileListLen = this[`fileList${
event.name}`].length;
lists.map(item => {
this[`fileList${
event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
});
});
for (let i = 0; i < lists.length; i++) {
//在这里调用上传图片函数 result是下边上传图片的返回值
const result = await this.uploadFilePromise(lists[i].url);
let item = this[`fileList${
event.name}`][fileListLen];
// console.log(result, 'hhhh');
this[`fileList${
event.name}`].splice(
fileListLen,
1,
Object.assign(item, {
status: 'success',
message: '',
url: result.url,
ossId: result.ossId
//这里的值是可以直接添加的,他会在你点击删除键的时候返
//回
})
);
fileListLen++;
}
},
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: `${
config.baseUrl}/system/oss/upload`, // 仅为示例,非真实的接口地址
filePath: url,
name: 'file',
formData: {
user: 'test'
},
success: res => {
// 这里返回的值就是新增图片函数中-----result
setTimeout(() => {
//这里的Promise返回值,是可以自定义的,
//url用来显示图片的上传服务器的地址,ossId表示唯一标识,你可以用它去删除服
//务端图片,这个具体可以后端交流
resolve({
url: JSON.parse(res.data).data.url, ossId:
JSON.parse(res.data).data.ossId });
}, 1000);
}
});
});
},
//提交新增信息
addRenWu() {
if (this.ZhiID === undefined) {
//发送请求新增任务
addFbTask(this.renwuInfo).then(res => {
(this.gzUser = []),
//提示提交成功,清空列表信息
(this.renwuInfo = {
});
this.fileList1 = [];
//弹窗提示提交成功
this.$modal.msgSuccess('新增成功');
});
}
},
};
</script>
最近也开发了自己的公众号,会在上面分享前端方面的知识,有兴趣的话,走个关注吧!!!
文章浏览阅读909次。《人机交互技术》课程介绍人机交互(Human-Computer Interaction, HCI):是研究人、计算机以及它们间相互影响,通过计算机输入、输出设备,以有效的方式实现人与计算机对话的技术;用户界面是人与计算机之间传递、交换信息的媒介和对话接口,是计算机系统的重要组成部分。人机交互与用户界面是两个有着紧密联系而又不尽相同的概念。人机交互强调的是技术和模型,用户界面是计算机的关键组成部分。..._人机交互方式的作用
文章浏览阅读3.2k次,点赞2次,收藏16次。在初步学习网络安全时,暂时了解DOS命令系统及常用命令,以形成一定的框架体系,后续学习中如需要再继续强化。_dos管道命令详解
文章浏览阅读219次。VB管理信息系统开发实战 大学计算机科学与技术专业毕业,从事教育培训两年,程..._管理系统vb教学
文章浏览阅读91次。React-StepPitGuide《React踩坑指南》十行代码九个警告八个错误竟然敢说七日精通六天学会五湖四海也不见如此三心二意之项目经理简直一等下流。自己总结的关于React学习心得,欢迎大家与我交流ReactGithub:TYRMarsgitbook经常出问题,所以迁到自建的站点了。React 基础知识React 版本..._react踩坑指南
文章浏览阅读5.5k次,点赞7次,收藏63次。常用的机器学习与深度学习算法简介1、机器学习1.1 决策树与随机森林1.2 支持向量机(SVM)1.3 k-最近邻算法1.4 朴素贝叶斯分类器2、深度学习2.1 人工神经网络2.2 深度神经网络2.3 卷积神经网络2.4 循环神经网络2.5 自编码器1、机器学习1.1 决策树与随机森林决策树(Decision Tree)是一种将决策流程以树状结构清晰表示的机器学习方法,本质上是通过一系列规则对数据进行分类的过程。图1-决策树随机森林(Random Forest)是通过构建多个决策树对样本进行训_机器学习和深度学习算法
文章浏览阅读95次。简述AOP是面向切面编程(Aspect-Oriented Programming)的简称。它不是一项技术,和平常说的OOP(Object-Oriented Programming)一样,它是一种编程思想。这里不再做更多的名词解释。上图:从这个丑陋的图中可以看出,利用AOP后,OOP的Objects 都可以只专注于自己的事情,而不需要去管用户是否登录以及记录本次操作日志的事情了。 而且关..._adaptinterceptor(
文章浏览阅读383次。逐浪锥钉体.rar逐浪圆体.rar_逐浪字体 版权
文章浏览阅读217次,点赞4次,收藏3次。GraphQL CLI:简化GraphQL开发的利器项目地址:https://gitcode.com/graphql-cli/graphql-cliGraphQL CLI 是一个强大的命令行工具,旨在帮助开发者更高效地管理和操作他们的GraphQL项目。它是开源的,由GraphQL社区维护,并且完全免费,其目标是统一和优化GraphQL的工作流程。项目简介GraphQL CLI 提供了多样...
文章浏览阅读1.8k次。_形式语义学 入门
文章浏览阅读1.2k次。HTML一、HTML概述1、HTML是一种描述性标记语言,用来描述页面内容的显示方式,如:文字、视频、音频程序等复杂元素。2、HTML文件是一种纯文本文件,以“.html”或“.htm”为后缀。3、HTML的基本组成单位是元素。4、HTML文档结构是由<html>、<head>和<body>这三大元素组成:1)<html>元素..._内容标题是html文档中的文本元素吗
文章浏览阅读733次。Exited(137),docker exec -it 容器名 /bin/bash 无法进入_docker 137
文章浏览阅读2.3k次,点赞4次,收藏27次。java迭代器Iterator讲解_iterator迭代器详解