vue element-ui 图片上传组件（带裁剪功能）_element 头像上传 可裁剪_爱喝冰可乐的博客-程序员宅基地
技术标签： upload vue elementui js javascript
效果：
组件：（比较多，这里就不写了，需要的留下邮箱我免费送[工作日] ）
出于某些原因，不会再免费赠送，需要的请自行下载：https://download.csdn.net/download/u013361179/23272081
这里采用FormData上传，有多种上传方法，我们采用的是防止服务器脏数据的处理办法，也就是在点击确定后并没有真正上传到服务器，而是暂存，在没有点击提交表单之前的操作都是在操作暂存区的图片，在点击提交表单后才是真正上传
引入：
import ImgCropper from '@c/ImgCropper/ImgCropper'
components: {
ImgCropper }
<ImgCropper :numLimit="5" :imgBaseUrl="IMAGEURL" @change="getImages($event)" @delete="deleteFile($event)" :introduceImg="coverList"></ImgCropper>
// 上传图片（临时上传，此时并没有上传到服务器）
getImages (event) {
this.fileList.push(event)
}
// 删除图片
deleteFile(file) {
if (file && file.id) {
this.fileList.map(item => {
if (item.id === file.id) {
this.fileList.splice(item, 1)
}
})
} else {
this.fileList = []
}
}
// 上传图片（上传图片到服务器，这个方法要在提交表单的时候再调用）
batchUpload() {
if (this.fileList.length) {
const params = new FormData()
this.fileList.map(item => {
params.append('files', item.file)
})
const res = await ImgServe.uploadBatchImg(params)
if (res.data.code === 200) {
res.data.data.map(item => {
this.updateList.push(item.filePath)
})
this.fileList = []
} else {
this.$message.warning(res.data.msg)
}
}
}
注意：删除可以和后端商量好，此处的删除是前端提交后覆盖服务器表中数据，所以等于是提交图片后后端会清除掉表中原有图片，重新放进去目前提交的图片（这种方法节省了一个删除接口）
智能推荐
Navicat for MongoDB 12.1.25 Windows、Mac最新版下载(亲测成功!)，最新版强大的数据库管理工具-程序员宅基地
Navicat for MongoDB 为 Navicat for MongoDB 数据库管理和开发提供了全方位的图形化的解决方案。下载地址:https://www.pojie.io/2288.html无缝数据迁移数据传输和数据同步可帮助您更轻松快捷地迁移数据，从而减少开销。提供详细的分步指南，以跨数据库传输数据。使用数据同步比较和同步数据库。在几秒钟内设置和部署比较，并获取详..._navicat for mongodb
开源中国软件频道_编程小黑马-程序员宅基地
大数据数据存储 (18)数据处理 (52)可视化 (22)数据查询 (8)其他 (81)Web应用开发SPDY开发包 (17)HTML5开发相关 (135)Pjax相关项目 (4)网站API (139)REST/RESTful项目 (110)响应式 Web 框架 (66)JavaScript MVC 框架 (80)WebDAV 开源软件 (32)AngularJS 扩展 (80)后台管理系统（模板） (229)Vue 组件 (65)GraphQL 项目 (14)Goog
Splunk for Industrial IoT让物联网数据变得可操作_splunk 物联网数据管理-程序员宅基地
Splunk首个物联网解决方案通过扩展对连接设备的数据访问权限，帮助工业企业降低成本并提高绩效中国，北京--(美国商业资讯)--致力于将数据转化为行动和价值的Splunk公司（NASDAQ：SPLK）今天宣布全面推出Splunk的首个物联网（IoT）解决方案，即Splunkfor Industrial IoT。Splunk Industrial IoT整合了Splunk Enterprise..._splunk 物联网数据管理
ATxmega128A1のDMA驱动程序_atxmega128a1u driver-程序员宅基地
//----------------dma_driver.h----------------/* This file has been prepared for Doxygen automatic documentation generation.*//*! \file ************************************************************_atxmega128a1u driver
WiFi无线网络的几种认证与加密方式_无线网络认证方式-程序员宅基地
一、Open System 完全不认证也不加密，任何人都可以连到无线基地台使用网络。 二、WEP (Wired Equivalent Privacy) 有线等效加密 最基本的加密技术，手机用户、笔记型计算机与无线网络的Access Point（网络金钥AP）拥有相同的网络金钥，才能解读互相传递的数据。这金钥分为64bits及128bits两种，最多可设定四组不同_无线网络认证方式
随便推点
基于RFID技术的服饰企业(报喜鸟)供应链管理系统建议方案-程序员宅基地
本项目的总体目标： 1）采用RFID技术构建企业的面料、半成品、成品、客户订单等局部智能信息环境，实现对货品的快速定位、快速处理，提高物流速度，有效支持制衣生产管理。 2）通过开发基于RFID的分销管理系统应用，实现连锁体系物流配送与调拨的自动化管理，提高销售信息、客户信息、促销数据、产品价格变动信息等的数据采集和分析能力，特别是提高对重点客户的服务能力。 3）产品按期交货率从目前95%
UVA - 10192 - Vacation （LCS）-程序员宅基地
题目传送：UVA - 10192思路：就是简单的最长公共子序列啦，不过输入居然还包含空格，然后很奇怪的TLE了，不是WA，心想n最大才100居然TLE，，好吧，可能有些数据特殊吧AC代码：#include #include #include using namespace std;char s1[105], s2[105];int dp[10
Linux的图形介面linux X Window System-程序员宅基地
在 Linux 上的图形介面我们称之为 X Window System，简称为 X 或 X11 囉！ 为何称之为系统呢？这是因为 X 视窗系统又分为 X server 与 X client ，既然是 Server/Client (主从架构) 这就表示其实 X 视窗系统是可以跨网路且跨平台的！X 视窗系统对于 Linux 来说仅是一个软体， 只是这个软体日趋重要喔！因为 Linux 是否能够在桌上...
GIS入门进阶之015_交集制表-程序员宅基地
一、引言(What)：矢量数据的空间分析 空间分析是综合分析空间数据技术的统称，是地理信息系统的核心部分，在地理数据的应用中发挥着举足轻重的作用。从数据类型上看，空间分析分为矢量数据的空间分析和栅格数据的空间分析两种。 GIS不仅能满足使用者对地图的浏览与查看，而且可以解决诸如哪里最近、周围有什么等有关地理要素位置和属性的问题，这些都需要利用矢量数据的分析功能。..._交集制表
HomePod状态指示灯含义_homepod 弹窗显示的白色_普通网友的博客-程序员宅基地
正常使用HomePod时，HomePod 顶部会显示状态指示灯,来看看macw小编为大家总结的不同颜色的灯代表什么意思吧！使用触摸控制只需轻点一下，即可在 HomePod 上实现控制播放、使用 Siri 等功能。具体操作如下：使用 Siri按住 HomePod 顶部直到看到五彩灯光，然后提出您的问题。调整音量播放期间，轻点 HomePod 顶部的 + 或 -。暂停和播放轻点 HomePod 顶部可暂停播放。再次轻点可继续播放。前往下一个音轨轻点两下 HomePod 顶部可跳过_homepod 弹窗显示的白色
图论——寻找最短路径路线的两种算法_最短路径算法-程序员宅基地
前言：关于找到最短路径上经过的边有两种方法 一种是从起点出发找一次最短路径，再从终点出发找一次最短路径 另一种是在找最短路径时标记下一个点 例题1：可怜的草坪 题目描述 小C的大学很大，从寝室到食堂要走很长一段路，很多的草坪位于这些路上。大家从寝室出发时，都喜欢从走最少的路达到食堂，哪些位于最短路上的草坪都要被踩踏，小C希望你帮他算算，有多少段草坪会经常被踩踏？ 输入_最短路径算法