vue 图片复制黏贴上传_Vue 做图片上传

水深无声 2022-11-05 15:58 237阅读 0赞

export default \{

name: "uploader",

data() \{

return \{

imgList: \[\],

size: 0

\};

\},

methods: \{

fileClick() \{

document.getElementById("upload\_file").click();

\},

fileChange(el) \{

if (!el.target.files\[0\].size) return;

this.fileList(el.target.files);

el.target.value = "";

\},

fileList(files) \{

for (let i = 0; i < files.length; i++) \{

this.fileAdd(files\[i\]);

\},

fileAdd(file) \{

// console.log(file, "54321");

this.size = this.size + file.size; //总大小

let reader = new FileReader();

reader.vue = this;

if (this.imgList.length <= 3) \{

//判断限制图片上传张数

reader.readAsDataURL(file);

reader.onload = function() \{

file.src = this.result;

this.vue.imgList.push(\{

file

\});

\};

// console.log(this.imgList, "12345");

\} else \{

this.$toast("最多上传四张图片");

\},

fileDel(index) \{

this.size = this.size - this.imgList\[index\].file.size; //总大小

this.imgList.splice(index, 1);

\},

bytesToSize(bytes) \{

if (bytes === 0) return "0 B";

let k = 1000, // or 1024

sizes = \["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"\],

i = Math.floor(Math.log(bytes) / Math.log(k));

return (bytes / Math.pow(k, i)).toPrecision(3) + " " + sizes\[i\];

\},

dragenter(el) \{

el.stopPropagation();

el.preventDefault();

\},

dragover(el) \{

el.stopPropagation();

el.preventDefault();

\},

drop(el) \{

el.stopPropagation();

el.preventDefault();

this.fileList(el.dataTransfer.files);

\};

.upload\_warp\_img\_div\_del \{

width: 16px;

right: 4px;

.upload\_warp\_img\_div\_top \{

position: absolute;

top: 0;

width: 100%;

height: 20px;

background-color: rgba(0, 0, 0, 0.4);

color: \#fff;

font-size: 12px;

display: flex;

justify-content: flex-end;

align-items: center;

/\* border:1px solid red; \*/

.upload\_warp\_img\_div img \{

width: 100%;

height: 100%;

.upload\_warp\_img\_div \{

position: relative;

height: 73px;

width: 73px;

border: 1px solid \#ccc;

margin: 0px 10px 5px 0px;

float: left;

text-align: center;

background-color: \#eee;

cursor: pointer;

/\* border:1px solid red; \*/

.upload\_warp\_img \{

width: 100%;

/\* border-top: 1px solid \#d2d2d2; \*/

padding: 5px 0 0 8px;

overflow: hidden;

margin-top: 10px;

display: flex;

justify-content: flex-start;

align-items: center;

/\* border: 1px solid black; \*/

/\* .upload\_warp\_text \{

text-align: left;

margin-bottom: 5px;

padding-top: 5px;

text-indent: 14px;

border-top: 1px solid \#ccc;

font-size: 14px;

border:1px solid red;

\} \*/

.upload\_warp\_right \{

float: left;

width: 57%;

margin-left: 2%;

height: 100%;

border-radius: 4px;

line-height: 130px;

color: \#999;

.addNote \{

width: 60px;

height: 60px;

margin: 7px 5px 0px 8px;

cursor: pointer;

display: flex;

justify-content: center;

align-items: center;

font-size: 45px;

color: \#bbbbbb;

border: 1px solid \#bbbbbb;

.upload\_warp\_left \{

float: left;

width: 100%;

height: 80px;

/\* border: 1px solid red; \*/

.upload\_warp \{

width: 100%;

height: auto;

display: flex;

justify-content: space-around;

align-items: center;

/\* border:1px solid black !important; \*/

.container \{

width: 97%;

/\* height: 80px; \*/

background-color: \#fff;

padding: 3px;

margin: 0 auto;

/\* border:1px solid green; \*/

.upimgBox \{

width: 100%;

/\* text-align: center; \*/

样式有稍微改动调整,亲测可用，转载原贴如下:https://blog.csdn.net/weixin\_41957098/article/details/80351914

vue 图片复制黏贴上传_Vue 做图片上传

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 vue图片上传功能实现

相关 Vue中实现图片黏贴上传到服务器：功能分析和实现

相关 vue element 图片上传做图片比例验证

相关 vue上传图片并压缩

相关 vue el-upload 上传图片

相关 vue 图片复制黏贴上传_Vue 做图片上传

相关 vue上传多张图片

相关 vue 上传图片

相关 Vue图片上传预览

相关 vue 上传文件图片