vue删除图片同时删除本地文件_vue上传图片到oss的方法示例（图片带有删除功能）...

最近Vue项目中，要将用户上传的图片全部上传到oss上，

OSS平台配置

在平台的概览里面看看自己的基础设置里面的读写权限是否改为了公共读，我这边只有配置公共读才上传并且回显图片成功，其他情况还请朋友告知，谢谢

关于跨域访问的配置

这里是我的效果图 (当只有点击上传按钮时才会上传到OSS)

预览图片

+

{{(percent * 100) + '%'}}

上传

完成

export default {

data() {

return {

status: 'ready',

files: [],

point: {},

uploading: false,

percent: 0

}

},

methods: {

add() {

this.$refs.file.click()

},

submit() {

console.log(this.files)

// if (this.files.length === 0) {

// console.warn('no file!');

// return

// }

var that=this

// 这里是OSS

const client = new OSS.Wrapper({

region: 'oss-cn-hangzhou',

accessKeyId: 'your access key',

accessKeySecret: 'your access secret',

bucket: 'your bucket name'

});

const fNum = this.files;

for(var i=0;i

var f=fNum[i].file

console.log(f)

const Name=f.name

console.log(Name)

const suffix = Name.substr(Name.indexOf("."));

const obj=this.timestamp();

const storeAs = 'header/'+obj+suffix // 路径+时间戳+后缀名

console.log(storeAs)

client.multipartUpload(storeAs, f).then(function (result){

console.log(result.res.requestUrls)

})

}

},

// 时间戳

timestamp:function(){

const time = new Date();

const y = time.getFullYear();

const m = time.getMonth()+1;

const d = time.getDate();

const h = time.getHours();

const mm = time.getMinutes();

const s = time.getSeconds();

const ms = time.getMilliseconds()

return ""+y+this.Add0(m)+this.Add0(d)+this.Add0(h)+this.Add0(mm)+this.Add0(s)+this.Add0(ms);

},

Add0:function(m){

return m<10?'0'+m : m;

} ,

finished() {

this.files = []

this.status = 'ready'

},

remove(index) {

this.files.splice(index, 1)

},

fileChanged() {

const list = this.$refs.file.files

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

if (!this.isContain(list[i])) {

const item = {

name: list[i].name,

size: list[i].size,

file: list[i]

}

this.html5Reader(list[i], item)

this.files.push(item)

}

}

this.$refs.file.value = ''

},

// 将图片文件转成BASE64格式

html5Reader(file, item){

const reader = new FileReader()

reader.onload = (e) => {

this.$set(item, 'src', e.target.result)

}

reader.readAsDataURL(file)

},

isContain(file) {

return this.files.find((item) => item.name === file.name && item.size === file.size)

},

}

}

.vue-uploader {

border: 1px solid #e5e5e5;

}

.vue-uploader .file-list {

padding: 10px 0px;

}

.vue-uploader .file-list:after {

content: '';

display: block;

clear: both;

visibility: hidden;

line-height: 0;

height: 0;

font-size: 0;

}

.vue-uploader .file-list .file-item {

float: left;

margin-left: 10px;

position: relative;

width: 150px;

text-align: center;

}

.vue-uploader .file-list .file-item img{

width: 150px;

height: 150px;

border: 1px solid #ececec;

}

.vue-uploader .file-list .file-item .file-remove {

position: absolute;

right: 4px;

display: none;

top: 4px;

width: 20px;

height: 20px;

font-size:20px;

text-align: center;

color: white;

cursor: pointer;

line-height: 20px;

border-radius: 100%;

transform: rotate(45deg);

background: rgba(0, 0, 0, 0.5);

}

.vue-uploader .file-list .file-item:hover .file-remove {

display: inline;

}

.vue-uploader .file-list .file-item .file-name {

margin: 0;

height: 40px;

word-break: break-all;

font-size: 14px;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

}

.vue-uploader .add {

width: 150px;

height: 150px;

float: left;

text-align: center;

line-height: 150px;

font-size: 30px;

cursor: pointer;

background: url(../assets/upImg.png) no-repeat; // 这里使用的是我本地图片

background-size: 100% 100%;

}

.vue-uploader .upload-func {

display: flex;

padding: 10px;

margin: 0px;

background: #f8f8f8;

border-top: 1px solid #ececec;

}

.vue-uploader .upload-func .progress-bar {

flex-grow: 1;

}

.vue-uploader .upload-func .progress-bar section {

margin-top: 5px;

background: #00b4aa;

border-radius: 3px;

text-align: center;

color: #fff;

font-size: 12px;

transition: all .5s ease;

}

.vue-uploader .upload-func .operation-box {

flex-grow: 0;

padding-left: 10px;

}

.vue-uploader .upload-func .operation-box button {

padding: 4px 12px;

color: #fff;

background: #007ACC;

border: none;

border-radius: 2px;

cursor: pointer;

}

.vue-uploader > input[type="file"] {

display: none;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。