Javascript 无法更新PUT终结点中的映像

我有python中的基本flask应用程序

我已经提出了更新数据的方法。 我想更新数据库中的助手，但图像未更新

在html页面上有“inputfile”参数，该参数应下载上传的文件，然后将其返回到函数

但我不知道怎么解决它。我希望“inputfile”中的图像更新为_assistant.data，以便以后可以对其进行处理

这是我的节目：

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db'

db = SQLAlchemy(app)
migrate = Migrate(app, db)

class Job(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(80), nullable=False)

class Picture(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    data = db.Column(db.LargeBinary)

class Assistant(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    job_id = db.Column(db.Integer, db.ForeignKey('job.id'), nullable=False)
    first_name = db.Column(db.String(80), nullable=False)
    last_name = db.Column(db.String(80), nullable=False)
    email_address = db.Column(db.String(80), nullable=False)
    pic_name = db.Column(db.String(300))
    data = db.Column(db.LargeBinary)

@app.route('/')
def index():
    return render_template('home.html')

def pic_2_thumbnail(image):
    im = Image.open(image)
    return im

def pic_to_bytes(im):
    imgByteArr = io.BytesIO()
    im.save(imgByteArr, format='BMP')
    imgByteArr = imgByteArr.getvalue()
    return imgByteArr

@app.route('/assistants/update/<int:id>', methods=['GET'])
def display_update(id):
        # updated_assistant = Assistant.query.get_or_404(id)

        assistant_job = db.session.query(Assistant, Job).filter((Assistant.job_id==Job.id) & (Assistant.id==id)).all()
        print(assistant_job)

        jobs = Job.query.all()
        return render_template('update_assistant.html', 
        assistant_job=assistant_job,
        jobs=jobs
        )

@app.route('/assistants/<int:id>', methods=['PUT'])
def update_assistant(id):
        updated_assistant = Assistant.query.get_or_404(id)
        data = request.json
        print(data)
        print(request)
        updated_assistant.job_id = data['job_id']
        updated_assistant.first_name = data['first_name']
        updated_assistant.last_name = data['last_name']
        updated_assistant.email_address = data['email_address']
        if data['inputfile'] != '':
            image = data['inputfile']
            size = 80, 80
            im = pic_2_thumbnail(image)
            im.thumbnail(size)
            x= pic_to_bytes(im)
            updated_assistant.data = x
        try:
            db.session.commit()
            return jsonify({'ok': 'ok'})
        except Exception as e:
            print(str(e))
            return 'There was an issue updating your assistant'

app=Flask（\uuuuu name\uuuuuu）
app.config['SQLALCHEMY\u DATABASE\u URI']='sqlite:///test.db'
db=SQLAlchemy（应用程序）
迁移=迁移（应用程序，数据库）
班级作业（数据库模型）：
id=db.Column（db.Integer，主键=True）
title=db.Column（db.String（80），null=False）
班级图片（db.Model）：
id=db.Column（db.Integer，主键=True）
data=db.Column（db.LargeBinary）
班级助理（db.Model）：
id=db.Column（db.Integer，主键=True）
job_id=db.Column（db.Integer，db.ForeignKey（'job.id'），nullable=False）
first_name=db.Column（db.String（80），nullable=False）
last_name=db.Column（db.String（80），nullable=False）
email_address=db.Column（db.String（80），nullable=False）
pic_name=db.Column（db.String（300））
data=db.Column（db.LargeBinary）
@应用程序路径（“/”）
def index（）：
返回渲染模板（'home.html'）
def PICU 2_缩略图（图像）：
im=图像。打开（图像）
返回即时消息
def pic_至_字节（im）：
imgByteArr=io.BytesIO（）
保存（imgByteArr，format='BMP'）
imgByteArr=imgByteArr.getvalue（）
返回imgByteArr
@app.route（'/assistants/update/'，methods=['GET']）
def显示更新（id）：
#更新的\u assistant=assistant.query.get\u或\u 404（id）
assistant\u job=db.session.query（assistant，job）.filter（（assistant.job\u id==job.id）&（assistant.id==id））.all（）
打印（助理工作）
jobs=Job.query.all（）
返回渲染模板（'update\u assistant.html'，
助理工作=助理工作，
工作=工作
)
@app.route（'/assistants/'，methods=['PUT']）
def更新助理（id）：
更新的\u assistant=assistant.query.get\u或\u 404（id）
data=request.json
打印（数据）
打印（请求）
更新的_assistant.job_id=数据['job_id']
更新的\u assistant.first\u name=数据['first\u name']
更新的\u assistant.last\u name=数据['last\u name']
更新的\u assistant.email\u address=数据['email\u address']
如果数据['inputfile']！=''：
图像=数据['inputfile']
尺寸=80，80
im=pic_2_缩略图（图像）
im.缩略图（大小）
x=pic_至_字节（im）
更新的_assistant.data=x
尝试：
db.session.commit（）
返回jsonify（{'ok'：'ok'}）
例外情况除外，如e：
打印（str（e））
return“更新助理时出现问题”

以下是html页面：

{% extends 'base.html' %}

{% block head %}
<head>
    <h3>Assistant Registration Update Forumlar</h3>
</head>

{% endblock %}

{% block body %}
<script>
    function updateAssistant() {

        id = '{{ assistant_job.0.0.id }}';
        console.log(id);
        url = window.location.origin + '/assistants/' + id;
        fetch(url, {
            method: 'PUT',
            body: JSON.stringify({
                'first_name' : document.getElementById('first_name').value,
                'last_name' : document.getElementById('last_name').value,
                'email_address' : document.getElementById('email_address').value,
                'job_id' : document.getElementById('job_id').value,
                'inputfile' : document.getElementById('inputfile').value,
            }),
            headers: {
            'Content-Type': 'application/json'
            },
    })
    .then(res => res.json())
    .then(data => location.replace(window.location.origin + '/assistants'));

    return false;
    };
</script>

<form onsubmit="return updateAssistant()">

       {% for assistant, job in assistant_job %}    
      <div class="form-group">
            <label for="exampleFormControlINput1">First name:</label>
            <input type="text" name="first_name" id="first_name" class="form-control" id="exampleFormControlInput1"
             value="{{assistant.first_name}}" required>
            <br>
            <label>Lastname:</label>
                <input type="text" name="last_name" id="last_name" class="form-control" id="exampleFormControlInput1"
                value="{{assistant.last_name}}" required>
            <br>
            <label>Email:</label>
                <input type="email" name="email_address" id="email_address" class="form-control" id="exampleFormControlInput1"
                value="{{assistant.email_address}}" required>
            <br>
            <label for="exampleFormControlSelect1">Job name:</label> 
            <select name='job_id' class="form-control" id="job_id" id="exampleFormControlSelect1"
            value="{{assistant.job_id}}" required>
                    <option value="{{ job.id}} ">
                        {{job.title}}
                    </option>
                {% for job in jobs %}
                    <option value="{{ job.id }}">
                {{ job.title }}
                    </option>
                {% endfor %}
            </select> 
            <br>  
            <label for="exampleFormControlFile1">Upload picture:</label>
                <input type = "file" name = "inputfile" class="form-control-file" id="exampleFormControlFile1">
            <br>
        </div>
        {% endfor %}    
        <input type="submit" name="Submit" value="Submit"/>  
    </form>
</div>
{% endblock %}

{%extends'base.html%}
{%block head%}
助理注册更新Forumlar
{%endblock%}
{%block body%}
函数updateAssistant（）{
id='{{assistant_job.0.0.id}}}'；
console.log（id）；
url=window.location.origin+'/assistants/'+id；
获取（url{
方法：'放'，
正文：JSON.stringify({
'first_name'：document.getElementById（'first_name'）。值，
“姓氏”：document.getElementById（“姓氏”）.value，
“电子邮件地址”：document.getElementById（“电子邮件地址”）.value，
“作业id”：document.getElementById（“作业id”）.value，
“inputfile”：document.getElementById（'inputfile'）。值，
}),
标题：{
“内容类型”：“应用程序/json”
},
})
.then（res=>res.json（））
.然后（data=>location.replace（window.location.origin+'/assistants'）；
返回false；
};
{助理的百分比，助理中的作业\u作业%}
名字：


姓氏：


电邮：


职务名称：
{{job.title}
{作业%中作业的%s}
{{job.title}
{%endfor%}


上传图片：


{%endfor%}
{%endblock%}
'inputfile'：document.getElementById（'inputfile'）.value，

这样不行

此类型的有一个
文件
属性，该属性是文件的集合

您可以获取集合的第一个元素并

constobase64=file=>newpromise（（解析、拒绝）=>{
const reader=new FileReader（）；
reader.readAsDataURL（文件）；
reader.onload=（）=>resolve（reader.result）；
reader.onerror=错误=>拒绝（错误）；
});

因此，带有应用更改的
updateAssistant
如下所示

函数updateAssistant（）{
id='{{assistant_job.0.0.id}}}'；
console.log（id）；
url=window.location.origin+'/assistants/'+id；
const[file]=document.getElementById（'inputfile'）.files
返回toBase64（文件）。然后（base64=>{
返回获取（url{
方法：'放'，
正文：JSON.stringify({
'first_name'：document.getElementById（'first_name'）。值，
“姓氏”：document.getElementById（“姓氏”）.value，
“电子邮件地址”：document.getElementById（“电子邮件地址”）.value，
“作业id”：document.getElementById（“作业id”）.value，
“inputfile”：base64，
}),
标题：{
“内容类型”：“应用程序/json”
},
})
})
}

至于服务器端，您已经转换回

从PIL导入