引言

前端实现

1. HTML结构

<div id="app">
  <input type="file" @change="onFileChange" multiple>
  <div v-for="(image, index) in images" :key="index">
    <img :src="image" alt="Uploaded Image">
    <button @click="removeImage(index)">Remove</button>
  </div>
</div>

2. Vue实例

接下来，我们需要在Vue实例中定义数据和方法。

new Vue({
  el: '#app',
  data: {
    images: []
  },
  methods: {
    onFileChange(event) {
      const files = event.target.files;
      for (let i = 0; i < files.length; i++) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.images.push(e.target.result);
        };
        reader.readAsDataURL(files[i]);
      }
    },
    removeImage(index) {
      this.images.splice(index, 1);
    }
  }
});

3. 图片预览

后端实现

1. Django配置

如果使用Django作为后端框架，我们需要进行以下配置：

  • 在urls.py中添加路由：
from django.urls import path
from . import views

urlpatterns = [
    path('upload/', views.upload, name='upload'),
]
  • 在views.py中创建上传视图：
from django.http import JsonResponse
from django.core.files.storage import FileSystemStorage

def upload(request):
    if request.method == 'POST':
        uploaded_file = request.FILES['file']
        fs = FileSystemStorage()
        filename = fs.save(uploaded_file.name, uploaded_file)
        uploaded_file_url = fs.url(filename)
        return JsonResponse({'url': uploaded_file_url})
    return JsonResponse({'error': 'Invalid Request'}, status=400)

2. Vue与后端交互

methods: {
  onFileChange(event) {
    const files = event.target.files;
    const formData = new FormData();
    for (let i = 0; i < files.length; i++) {
      formData.append('file', files[i]);
    }
    axios.post('/upload/', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    .then(response => {
      this.images.push(response.data.url);
    })
    .catch(error => {
      console.error('Error:', error);
    });
  }
}

总结