Vue 3结合Axios使用响应式状态上传图片报数组转字符串错误如何解决

array to string报错由请求参数序列化逻辑异常导致：
Axios默认会将普通JS对象类型的请求体序列化为JSON字符串，而你存入state.updateMovie.image的是二进制File对象，该类型无法直接被JSON序列化，转换过程中触发类型转换错误。
文件上传需要使用multipart/form-data格式的请求体，不能使用普通JSON格式传输。

修改提交逻辑，使用FormData对象包装所有请求参数：

const submitModal = (type) => {
  if (type === 'edit') {
    // 初始化FormData实例
    const formData = new FormData()
    // 添加图片文件参数，参数名需和后端约定的接收字段一致
    formData.append('image', state.updateMovie.image)
    // 若有其他文本参数也可通过append方法添加，示例：
    // formData.append('name', state.updateMovie.name)

    const id = state.updateMovie.id
    axios.post(`movie/update/${id}`, formData)
      .then((res) => {
        if (res.status === 200) {
          const data = res.data.data.movie
          // 原有后续逻辑
        }
      })
      .catch(err => {
        // 新增错误捕获方便排查问题
        console.error('提交失败：', err)
      })
  }
}

说明：当Axios检测到请求体为FormData类型时，会自动设置带边界标识的multipart/form-data请求头，无需手动配置。

如果需要实现前端图片预览功能，可在updatePreview方法中新增预览地址生成逻辑：

function updatePreview(e) {
  if (e.target.files.length === 0) {
    return
  }
  const file = e.target.files[0]
  imageFile.value = file
  state.updateMovie.image = file
  // 生成预览地址，可直接赋值给img标签的src属性展示
  state.previewUrl = URL.createObjectURL(file)
}

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