我正在尝试显示图像而不是图像名称。这里我显示的是图片名称我还想显示上传的图片。我们还可以限制用户只能上传6张图片。所以下面是我的代码，如果有人有一个想法，请帮助我。所以在我的代码中，用户可以上传许多图像，但我想限制只有六个图像。
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="asad">
<template >
<div class="container">
<div>
<h2>Multiple Files</h2>
<hr/>
<label>Files
<input type="file" multiple @change="handleFileUploads( $event )"/>
<ul v-if="files.length">
<li v-for="(name, i) in filesNames" :key="i">{{ name }}</li>
<li>{{ files }}</li>
</ul>
</label>
<div>
<img v-for="image in images" :src="image" />
</div>
<br>
<button v-on:click="submitFiles()">Submit</button>
</div>
</div>
</template>
</div>
</body>
<script>
var app = new Vue({
el: '#asad',
data(){
return {
files: [],
images: [],
}
},
computed: {
filesNames() {
const fn = []
for (let i = 0; i < this.files.length; ++i) {
fn.push(this.files.item(i).name)
}
return fn
}
},
methods: {
handleFileUploads( event ){
this.files = event.target.files;
},
submitFile(){
let formData = new FormData();
for( var i = 0; i < this.files.length; i++ ){
let file = this.files[i];
formData.append('files[' + i + ']', file);
this.images.push(URL.createObjectURL(file));
}
axios.post( '/multiple-files', formData,
{headers: {'Content-Type': 'multipart/form-data'}}
).then(function(){
console.log('SUCCESS!!');
})
.catch(function(){
console.log('FAILURE!!');
});
}
}
})
</script>
</html>
输入这个限制上传图片。在这个例子中，我限制了最多3个图像。您可以修改代码以限制6个图像
<!DOCTYPE html>
<html>
<head>
<title>HTML file upload</title>
</head>
<body>
<form>
<input type="file" action="/action_page.php" name="name" multiple><br/>
Upload multiple files, and click Submit.<br>
<input type = "submit" value = "submit">
</form>
<script>
$(function(){
$("input[type = 'submit']").click(function(){
var $fileUpload = $("input[type='file']");
if (parseInt($fileUpload.get(0).files.length) > 3){
alert("You are only allowed to upload a maximum of 3 files");
}
});
});
</script>
</body>
</html>