哟喂小伙伴们~在你们最近干活的时候，是不是也老遇到那个传照片的麻烦事儿呢?别慌容小爷我跟大家慢慢叨叨
看看这个传文件的功能，厉害了，两个特点：一不能被删；二，还真能删（有删除按钮呢）!这样的设计真是太炫酷了！那么，你能知道这是如何实现的吗?马上告诉你答案
{{upTitle}}
{{upNum}}/{{uploadNum}}
接下来咱们研究一下组件布局的部分代码呗！你看那个叫做kk-icon的自定义图标，可以自由调整颜色大小！现在给你个小挑战，换成别的图标试试看~接着，把新图标加上动态的class属性，于是一个显示或隐藏的功能就搞定咯！咱们轻轻松松就做完了这个任务！
.uploadImg{
text-align: left;
.upload-content{
margin-left: 0.3rem;
.upload-title{
display: flex;
justify-content: space-between;
padding: 0.3rem 0.3rem 0.3rem 0;
.show-num{
color: #c9c9c9;
}
}
.img-list{
display: inline-block;
margin: 0.6rem 0.3rem 0.3rem 0;
.show-img{
position: relative;
display: inline-block;
margin-right: 0.12rem;
height: 1.3rem;
width: 1.3rem;
img{
width: 100%;
height: 100%;
}
.hide-del{
display: none;
}
.yd-icon-error{
position: absolute;
top: 0;
right: 0;
}
}
.uploadSec{
position: relative;
display: inline-block;
width: 1.3rem;
height: 1.3rem;
overflow: hidden;
img{
width: 100%;
height: 100%;
}
#choose{
position: absolute;
height: 100%;
left: 0;
top: 0;
opacity: 0;
}
}
}
}
}
接下来我们就来谈谈如何实现！首先，只需使用input type=”file”这玩意儿，就可以搞定图片选取的事情。如果你希望让用户多挑选几张照片的话，就在input上加上个multiple属性就OK啦（其他小贴士这边就不提了哈）。再来，这个控件能够获取父级传递过来的好多信息，比如展示图片数量能否删除，上传以及预览的网址等等之类的。
选好了图片就开始上传！其实就是，一摁上传按钮就会触发change事件，再通过formData把图片塞进信息里面。当然，我还顺便搞了个叫fileAdd的小程序，好让对图片能有点儿花样儿。可惜后台只认字符串格式的图片网址，那就只好用 join() 把图片数组压缩成字符，搞定上传（毕竟不能直接发整个图片数组过去所以说这其实是一张张传的~）。
来，咋们聊聊删图这个事哈。其实我这儿只是把最近发的那些图给清理了下，跟以前传到图片网站的没啥联系！是不是觉得麻烦？别担心，总会有其他方法解决的哟~
说到底我就是直接看组件里的图片动不动咯，这样就知道新图有啥消息了！这个全套上传组件有点糙，但是改造一下的话效果会好不少。希望小伙伴们继续支持我们不知道这些话对你们学东西有木有帮助？
// 上传操作
onUpload (e) {
let photoFile = e.target
let val = e.target.value
// 判断是否符合上传条件
if (photoFile.files.length === 0) return false
for (let i = 0; i < photoFile.files.length; i++) {
this.fileAdd(photoFile.files[i],i)
}
}
大家来说说看，这个上传小工具是不是超好用？彻底解除了我们上传照片的烦恼！想试试？来我们公司的项目库找找！别忘了夸赞一下并分享给其他人！内容到这里就结束！希望大家都觉得这个插件好棒，挖掘出更多新鲜好玩儿的用法。遇到问题不要犹豫，大胆提出来，热诚欢迎大家积极参与互动。期待与大家深入交流共同进步！一起加油努力！
// 添加图片
fileAdd (file,index) {
let csrf_token = this.getCookie('XSRF-TOKEN');
let formFile = new FormData();
let imgName = 'img0';
formFile.append(imgName, file);
formFile.append("_token", csrf_token);
let name = file.name
let size = file.size
let types = '.jpg,.jpeg,.png,.gif' //文件格式
let fileExt = name.substring(name.lastIndexOf('.')).toLowerCase()
let result = types.indexOf(fileExt)
if (result 1 * 1024 * 1024) {
this.$dialog.toast({
mes: '图片大小不能大于1M',
timeout: 1000
})
return false
}
if (this.fileList.length >= this.uploadNum) {
this.$dialog.toast({
mes: '图片最多只能上传' + this.uploadNum + '张',
timeout: 1000
})
return false
}
axios.post(this.upUrl,formFile)
.then((res) => {
this.upNum = this.fileList.length + 1; //计算图片数量
this.fileList.push(file); //添加进图片数组
let imgUrl = this.showUrl + res.data.data; //图片回显地址
let upImg = res.data.data; //传给后台的图片地址
this.imgList.push(imgUrl);
this.upImgList.push(upImg);
let upImgAll = this.upImgList.join(',');
this.$emit('input', upImgAll);
}).catch((err) => {
console.log(err);
})
},
评论0