Laravel+Vue处理blob图片上传至S3/DigitalOcean获取公网URL问题

问题根因梳理 #

• 后端判断条件错误：前端提交的表单字段名为photo，但代码中判断$request->has('upload')，条件永远不会触发
• Laravel获取上传文件方法错误：表单提交的二进制文件不能用$request->get()读取，必须用$request->file()方法获取
• 单文件提交无需循环：当前前端逻辑一次仅上传单个文件，不需要遍历文件数组
• 前端请求头配置冗余：axios提交FormData时不需要手动设置Content-Type，浏览器会自动生成带正确boundary的请求头，手动配置反而可能导致解析错误
• 存储逻辑冗余：Laravel针对上传的UploadedFile对象有封装好的存储方法，不需要手动读取blob内容、单独设置权限

修复后的代码实现 #

前端Vue代码 #

export default {
  emits: ['onClose'],
  props: ['isOpen'],
  data: function() {
    return {
      serverOptions: {
        process: (fieldName, file, metadata, load, error) => {
          const formData = new FormData();
          // 和后端接收字段名保持一致
          formData.append('photo', file, file.name);
          axios({
            method: "POST",
            url: '/chat/room/upload',
            data: formData
            // 移除手动设置的Content-Type，交由浏览器自动处理
          })
          .then((res) => {
            // 可直接使用返回的图片URL做后续处理
            console.log(res.data.url)
            load();
          })
          .catch(() => {
            error();
          });
        }
      },
      files: [],
    };
  },
  methods: {
    handleFilePondInit: function () {
      console.log('FilePond has initialized');
      this.$refs.pond.getFiles();
      console.log(this.$refs.pond.getFiles());
    },
  },
}

后端Laravel控制器代码 #

use Illuminate\Support\Facades\Storage;
use Illuminate\Http\UploadedFile;

public function uploadImage(Request $request)
{
    // 先校验上传文件合法性，可根据业务调整大小、格式限制
    $request->validate([
        'photo' => 'required|file|image|max:10240' // 限制最大10M的图片
    ]);

    /** @var UploadedFile $file */
    $file = $request->file('photo');
    // 生成唯一文件名避免覆盖，保留原始文件扩展名
    $filename = 'files/' . uniqid() . '.' . $file->getClientOriginalExtension();
    
    // 直接存储文件到DigitalOcean Spaces并设置公开权限
    Storage::disk('digitalocean')->putFileAs(
        '/',
        $file,
        $filename,
        'public' // 直接指定公开权限，不需要单独调用setVisibility
    );

    // 获取公网访问URL
    $url = Storage::disk('digitalocean')->url($filename);

    // 此处添加你的数据库存储、聊天室消息广播逻辑即可
    // $newMessage = ChatMessage::create(['content' => $url, 'type' => 'image', 其他字段...]);
    // broadcast(new NewChatMessage($newMessage))->toOthers();

    return response()->json(['url' => $url]);
}

异常排查补充 #

如果修改后仍然无法正常上传，可按以下顺序校验配置：

• 确认config/filesystems.php中digitalocean磁盘的endpoint、key、secret、region、bucket参数填写正确
• 确认DigitalOcean Spaces的CORS配置已经放行你的前端域名
• 确认Spaces的文件目录权限已开启公开访问，或者配置了对应的CDN访问规则

内容的提问来源于stack exchange，提问作者ArcticMediaRyan