0

我有这个处理图像上传的公式化组件

<FormulateInput
          type="image"
          name="room_photos"
          v-model="room_photos"
          label="Select Room Images To Upload"
          help="Select a png, jpg,webp or gif to upload."
          validation="required|mime:image/jpeg,image/png,image/gif,image/webp"
          :uploader="uploadRoomImages"
          error-behavior="live"
          multiple
        />

这是上传功能

uploadRoomImages: async function (file, progress, error, options) {
    try {
        console.log(file, options);
        const formData = new FormData()
        formData.append('room_photos', file)
        const result = await fetch('https://api.example.com/uploads_scripts/rooms.php', {
            method: 'POST',
            body: formData
        })
        progress(100) // (native fetch doesn’t support progress updates)
        
        return await result.json()
    } catch (err) {
        error('Unable to upload file')
    }
}

我已将图像链接存储在数据库中，我可以轻松访问它们

 "room_photos" : [
                {
                        "url" : "/var/www/html/uploads/609cd3aaaaefd.jpg"
                },
                {
                        "url" : "/var/www/html/uploads/609cd3aaa9dc2.jpg"
                },
                {
                        "url" : "/var/www/html/uploads/609cd3aab1252.jpg"
                }
        ],
  "freewifi" : "",
  "nearpool" : "",

我得到了像这样的其余数据

axios.get(get_one)
            .then(response => {   
                console.log(response.data);
                var data = response.data;
                    this.roomsData = data
        
            })
            .catch(e => {
                this.errors.push(e)
            });

并用我存储在数据库中的数据重新填充我的表单。我怎样才能使上传的图像可用于编辑？

4

0 回答 0